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/

Have you tried anything? There's no JS in your fiddle. This is not a "solve my problem" forum. You need to give it a go yourself fist. We'll help you fix issues, not write it for you. — Paul Fleming, Jun 23 '13 at 08:42
yea I tried of course... because of that I have written what js I have used, but I've deleted from fiddle because it was not working... Main problem I had is that my values from first list are not all ordered numbers as on second list... that's where I get stucked... if you do not believe me, that's your thing then... — dzordz, Jun 23 '13 at 08:46

score 2 · Answer 1 · answered Jun 23 '13 at 08:57

2

Maybe something like this :

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

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

answered Jun 23 '13 at 08:57

krishwader

11,341
1
34
51

score 1 · Answer 2 · answered Jun 23 '13 at 08:45

1

i Added this JS code:

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

Working Great in JSFiddle

answered Jun 23 '13 at 08:45

Ahmed Ali

977
1
12
25

thanks, but that is not solution... because second #day list must be enabled only on select of 'yes:' or 'maybe:' from first list.... on selection of other options, #day would not get enabled – dzordz Jun 23 '13 at 08:48

mohkhan · Answer 3 · 2013-06-23T09:02:21.303

1

This should work...

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

edited Jun 23 '13 at 09:02

answered Jun 23 '13 at 08:47

mohkhan

11,925
2
24
27

that is something already... but my real need is to get enabled to yes and maybe option... something like that http://jsfiddle.net/SDzUS/ but not else part seems not to work, why? – dzordz Jun 23 '13 at 08:52

Pbk1303 · Accepted Answer · 2013-06-23T09:02:54.730

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.

edited Jun 23 '13 at 09:02

answered Jun 23 '13 at 08:57

Pbk1303

3,702
2
32
47

yea, I have misspeled something in @mohkhan example, and that is solution I like the most... thank you – dzordz Jun 23 '13 at 09:01
1

`attr` isnt used anymore. try changing it to `prop` – krishwader Jun 23 '13 at 09:03

score 1 · Answer 5 · answered Jun 23 '13 at 09:11

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); 
});

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

5 Answers5

Linked