Geek Answers Handbook

Disable selected form if radio checked

How to disable form select drop-down list if radio button is selected?

I would like the #preference form to be disabled if the user selects the #no switch, and it will turn on again if the user selects #yes or #maybe.

This is my form code -

<form name="xmas" id="xmas" action="send_mail.php" method="post"> <input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label> <input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label> <input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a call</label><br /> <div class="secondlineform"> <input type="text" name="name" class="textfield" value="Name" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/> <input type="text" name="email" class="textfield" value="Email" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/> <input type="text" name="company" class="textfield" value="Company" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/> <select class="dropselect" name="preference" label="Preference" id="preference"> <option selected="selected" disabled="disabled" value="Preference">Preference</option> <option value="Alcohol Package">Alcohol Package</option> <option value="Gift Card Package">Gift Card Package</option> </select> <input type="submit" value="" name="submit" id="submit" class="submit"/> </div> </form>

And this is my script code -

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 


  var update_select = function () { if ($('#no').is(':checked')) { $('#preference').attr('disabled', "disabled"); } else { $("#preference").removeAttr("disabled"); } }; $(update_select); $('#no').change(update_select); </script>

Thanks so much for any answers! I have been studying this for ages, and all the solutions that I find do not seem to solve my problem.

+4
source share
4 answers

you add a change event only for radio No , change it to:

 $("input[name='choice']").change(update_select);

Demo :: jsFiddle

+2
source 
 $('input[type=radio]').change(update_select);​
+2
source

You need to apply the update_select function to the rest of the switch, e.g.

 var update_select = function () { $('#preference').attr('disabled', $('#no').is(':checked')); }; $('#no').change(update_select); $('#yes').change(update_select); $('#maybe').change(update_select);

Here is the fiddle: http://jsfiddle.net/QXkhM/

0
source

Wrap your switch list with ul and give it an identifier.

For instance:

  <ul id="offer"> <input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label> <input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label> <input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a cal l</label><br /> </ul> var update_select = function () { if ($('#no').is(':checked')) { $('#preference').attr('disabled', "disabled"); } else { $("#preference").removeAttr("disabled"); } }; $(update_select); $('#offer').change(update_select);

And he will work

0
source

More articles:


All Articles