CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Klanto Aguntuk
Klanto Aguntuk

Reputation: 719

Enabling & disabling form's field based on the choice of radio button & select option together

enter image description here

In the above form, when the users choose No radio button of Want it? field the following select menu of If yes, how? field & text input area of Address field should be disabled.

If the users choose Yes both the following fields should be enabled where users shall have the preference to choose delivery method in the selection menu of If yes, how? field which are:

home_delivery

pos_delivery

If the users select pos_delivery the text input area of Address field should be disabled.

The html & jQuery codes are as following:

<table>
<tr>
<td>Want it?</td>
<td><input type="radio" name="choose" id="yes" value="Yes" />Yes</td>
<td><input type="radio" name="choose" id="no" value="No" />No</td>
</tr>
<tr>
<td>If yes, how?</td>
<td>
<select name="delivery_method" id="delivery_method">
<option value="" selected="selected">Select Delivery Method</option>
<option value="home_delivery">Home Delivery</option>
<option value="pos_delivery">Point of Sale Delivery</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" type="text" value="" size="30" />
</td>
</tr>


<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="choose"]').on('click', function() {
    if ($(this).val() === 'Yes') {
        $('#delivery_method,#address').removeProp("disabled");
    }else{
        $('#delivery_method,#address').prop("disabled", "disabled");
    }
});disabled
});
</script>
</script>-->
<script type="text/javascript">
jQuery(document).ready(function($){
$('#address').attr('disabled','disabled');        
$('select[name="delivery_method"]').on('change',function(){
var  option = $(this).val();
    if(option === "home_delivery"){           
    $('#address').removeAttr('disabled');          
     }else{
     $('#address').attr('disabled','disabled'); 
    }  
  });
});
</script>

The following blocks of jQuery code serve the purpose individually but when these are combined together, it seems that the following two blocks of jQuery code are conflicting with each other.

How can I combined these two block of code together in this case?

Upvotes: 0

Views: 2858

Answers (1)

benomatis
benomatis

Reputation: 5643

Just replace this...

$('#delivery_method,#address').removeProp("disabled", "disabled");

...with this...

$('#delivery_method,#address').prop("disabled", false);

Additionally you somehow left a disabled function or statement there for some reason:

jQuery(document).ready(function($){
    $('input[name="choose"]').on('click', function() {
        if ($(this).val() === 'Yes') {
            $('#delivery_method,#address').prop("disabled", false);
        }else{
           $('#delivery_method,#address').prop("disabled", "disabled");
        }
    });disabled /* <-- this one */
});

...just remove that and you should be good to go.

EDITED: A little explanation: removeProp takes one property only, so you either use that properly...

$('#delivery_method,#address').removeProp("disabled");

... or use prop to do the same, as shown above.

Here is a fiddle demo

Upvotes: 1

Related Questions