disable dropdown and test fields on radio button click?

[shany0786]

i am stuck at one problem where i have two radio buttons "yes" and "no" by default yes is checked and below these radio buttons there are 3 drop downs for country,state,cities and two text fields.no what i want is when user select "no" radio button all these 3 dropdowns and 2 text fields get disabled i tried searching net but i only get solution for either one dropdown or text field?below is my code

<fieldset>
                        <label for="bed">I Would like to offer a bed for stay:</label>
                        <div class="radio">
                          <label><input type="radio" name="optradio" checked="checked" id="radio1">YES</label>
                        </div>
                        <div class="radio">
                          <label><input type="radio" name="optradio" id="radio2">NO</label>
                        </div></fieldset>

                    <h4 align="left">Couch Address:</h4>

                        <script>
                        $(document).ready(function() {  
                     $("#country").change(function(){  
                     /*dropdown post *///  
                     $.ajax({  
                        url:"<?php echo  
                        base_url();?>Country_state/buildDropStates",  
                        data: {id:  
                           $(this).val()},  
                        type: "POST",  
                        success:function(data){  
                        $("#state").html(data);  
                     }  
                  });  
               });  
            });   
            </script>
                    <label for="country">Country</label>
                         <?php echo form_dropdown('country_name',$countryDrop,'','class="required" id="country" '); ?>
                         <br />
                         <br />


                        <label for="state">State</label>
                         <select name="state_id" id="state">  
                             <option value="">Select State</option>  
                          </select>

                    <script>
                        $(document).ready(function() {  
                     $("#state").change(function(){  
                     /*dropdown post *///  
                     $.ajax({  
                        url:"<?php echo  
                        base_url();?>Country_state/buildDropCities",  
                        data: {id:  
                           $(this).val()},  
                        type: "POST",  
                        success:function(data){  
                        $("#city").html(data);  
                     }  
                  });  
               });  
            });   
            </script>



                        <label for="city">City</label>
                         <select name="city_id" id="city">
                          <option>Select City</option>
                         </select> 

                        <label for="addressline1">Address Line 1</label>
                        <input type="text" id="addressline1" name="addressline1" value="<?php echo set_value('addressline1');?>" placeholder="enter your Address...">
                        <label for="addressline2">Address Line 2</label>
                        <input type="text" id="addressline2" name="addressline2" value="<?php echo set_value('addressline2');?>" placeholder="enter your Address...">

plz help?

[diafol]

Not sure why you have php in the ajax script, it's static text as far as I can see. Will have a look later, unless you get a few bites in the meantime.

[diafol]

<div class="radio">
    <label><input type="radio" name="optradio" checked="checked" id="radio1" value="1">YES</label>
</div>
<div class="radio">
    <label><input type="radio" name="optradio" id="radio2" value="2">NO</label>
</div>

With the added values, should be easier:

$("input[name='optradio']").click(function(){
    if($("input[name='optradio']:checked" ).val() == "2")
    {
        //disable
    }else{
        //enable
    }
});

NOT TESTED

[gentlemedia]

Using .change() is more appropriate for changing values such as radio buttons.

$('input[name="optradio"]').change(function() {
  if ($(this).val() == '2') { 
    // disable
  } else {
    // enable
  }
});