在 jquery 中启用/禁用下拉框答案

【问题标题】：Enable/Disable a dropdownbox in jquery在 jquery 中启用/禁用下拉框
【发布时间】：2011-12-03 22:22:17
【问题描述】：

我是 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

【解决方案1】：

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

http://jsfiddle.net/tft4t/

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

【讨论】：

注意：jQuery 1.6.x 使用 .prop 而早期版本使用 .attr
$("#chkdwn2").change(function() { $("#dropdown").prop('disabled', !this.checked); }) jsfiddle.net/tft4t/74

【解决方案2】：

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

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

【讨论】：

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

【解决方案3】：

试试 -

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

【讨论】：

【解决方案4】：

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

JsFiddle

【讨论】：

我给你一个大拇指只是因为这很酷......我不知道这个功能。

【解决方案5】：

启用/禁用 -

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

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

【讨论】：

【解决方案6】：

试试这个

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

在if 语句中使用.prop。

【讨论】：

【解决方案10】：

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

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

            }

【讨论】：