在jQuery中启用/禁用下拉框

74

我是jQuery的新手，我想使用复选框启用和禁用下拉列表。这是我的html：

<select id="dropdown" style="width:200px">
    <option value="feedback" name="aft_qst">After Quest</option>
    <option value="feedback" name="aft_exm">After Exam</option>
</select>
<input type="checkbox" id="chkdwn2" value="feedback" />

我需要执行什么jQuery代码？还在搜索良好的jQuery文档/研究材料。

jquery drop-down-menu

— 阿伦PS
source

170

我希望这是一种易于理解的方法：

http://jsfiddle.net/tft4t/

$(document).ready(function() {
 $("#chkdwn2").click(function() {
   if ($(this).is(":checked")) {
      $("#dropdown").prop("disabled", true);
   } else {
      $("#dropdown").prop("disabled", false);  
   }
 });
});

— 克里斯·克劳斯（Kris Krause）
source

7

注意：jQuery 1.6.x使用.prop，而早期版本使用.attr

— Kris

$("#chkdwn2").change(function() { $("#dropdown").prop('disabled', !this.checked); }) jsfiddle.net/tft4t/74

— 法布里西奥磨砂

11

尝试-

$('#chkdwn2').change(function(){
    if($(this).is(':checked'))
        $('#dropdown').removeAttr('disabled');
    else
        $('#dropdown').attr("disabled","disabled");
})

— 杰恩德拉
source

9

我正在使用JQuery> 1.8，这对我有用...

$('#dropDownId').attr('disabled', true);

— 克里斯·罗斯特
source

考虑到每个循环等都会影响性能，这应该是公认的答案（在2019年初），并且使用attr方法是执行此操作最有效的方法。

— SeaWarrior404 '19

2

启用/禁用-

$("#chkdwn2").change(function() { 
    if (this.checked) $("#dropdown").prop("disabled",true);
    else $("#dropdown").prop("disabled",false);
})

演示-http://jsfiddle.net/tTX6E/

— ipr101
source

1

$("#chkdwn2").change(function(){
       $("#dropdown").slideToggle();
});

JsFiddle

— 成因
source

只是因为这很酷，所以我会给您竖起大拇指...而我对此功能一无所知。

— AxleWack

1

尝试这个

 <script type="text/javascript">
        $(document).ready(function () {
            $("#chkdwn2").click(function () {
                if (this.checked)
                    $('#dropdown').attr('disabled', 'disabled');
                else
                    $('#dropdown').removeAttr('disabled');
            });
        });
    </script>

— Santosh Singh
source

1

没有if-else的更好的解决方案：

$(document).ready(function() {
    $("#chkdwn2").click(function() {
        $("#dropdown").prop("disabled", this.checked);  
    });
});

— 穆罕默德·艾哈迈德（Muhammad Ahmad）
source

0

$("#chkdwn2").change(function() { 
    if (this.checked) $("#dropdown").prop("disabled",'disabled');
})

— Baqer Naqvi
source

0

$(document).ready(function() {
 $('#chkdwn2').click(function() {
   if ($('#chkdwn2').prop('checked')) {
      $('#dropdown').prop('disabled', true);
   } else {
      $('#dropdown').prop('disabled', false);  
   }
 });
});

利用的.prop在if声明。

— 罗斯·格兰伯
source

0

如果从dropdown1中选择值为15的选项，则将禁用dropdown2，dropdown 3

$("#dropdown1").change(function(){
            if ( $(this).val()!= "15" ) {
                $("#dropdown2").attr("disabled",true);
                $("#dropdown13").attr("disabled",true);

            }

— 穆罕默德
source