jquery on certain option select on first select list, enable second select list

Question

I'm trying to solve a situation where you have two select lists and on first and second option from first list, second list gets enabled.

Ok, I have #decide and #day select lists, #day is disabled by default. If User would select option yes: or maybe: from #decide list, #day list would get enabled with

$('#day').prop('disabled', false);

else or if the any other option is selected it would give back that disabled property to #day:

$('#day').prop('disabled', true);

currently I have only html:

 <select id="decide" name="decide" class="span4">
    <option value="0" selected="selected">--</option>
    <option value="yes">yes:</option>
    <option value="maybe">maybe:</option>
    <option value="no">no</option>
    <option value="nevermind">nevermind</option> 
</select>
<select id="day" name="day" class="span4" disabled>
    <option value="0" selected="selected">--</option>
    <option value="1">monday</option>
    <option value="2">tuesday</option>
    <option value="3">saturday</option>
    <option value="4">sunday</option> 
</select>

and idea to solve it with parts of jquery code qouted

here is jsfiddle with current situation: http://jsfiddle.net/3hwzK/

Answer 1

You can try this,

          $("#decide").change(function (){
              if(this.value == "yes" || this.value == "maybe"){
                   $("#day").removeAttr("disabled");
              }else{
           $("#day").attr("disabled", "true");
           }
           });

if the value you've selected is "yes" or "maybe" ,the "#day" selectbox will be enabled, else it will be disabled.

Answer 2

Maybe something like this :

$("#decide").change(function () {
    $("#day").prop("disabled", !(["yes", "maybe"].indexOf(this.value) !== -1));
});

Demo : http://jsfiddle.net/hungerpain/3hwzK/2/

Answer 3

i Added this JS code:

$("#decide").change(function () {
  $('#day').prop('disabled', false);  });

Working Great in JSFiddle

Answer 4

This should work...

$(document).on('change', "#decide", function(){
if(this.value == "yes" || this.value == "maybe"){
    $("#day").removeAttr("disabled");
}else{
    $("#day").attr("disabled", "true");
}
});

Answer 5

you can also use this approach.. http://jsfiddle.net/3hwzK/3/

$("#decide").change(function () {
    var valid_answers = ['yes', 'maybe'];
    var is_disabled = ($.inArray($(this).val(), valid_answers) > -1) ? false : true;
    $('#day').prop('disabled', is_disabled); 
});