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

半城伤御伤魂 提交于 2020-01-17 04:06:05

问题


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/


回答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.




回答2:


Maybe something like this :

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

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




回答3:


i Added this JS code:

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

Working Great in JSFiddle




回答4:


This should work...

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



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


来源:https://stackoverflow.com/questions/17259027/jquery-on-certain-option-select-on-first-select-list-enable-second-select-list

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!