启用复选框时禁用 jQuery 选择的下拉菜单

Question

我是 jQuery 的新手，我很难弄清楚如何在选中复选框时按 id 禁用下拉列表。

逻辑看起来像这样。

1) 如果启用（选中）复选框，则禁用下拉菜单 2）如果一个复选框被禁用（未选中）然后启用下拉

例如，复选框 id 是 Trivial_Order，下拉列表 id 是 manager_search

var select = $('select');
select.chosen();
select.on('chosen:updated', function () {
    if (select.attr('readonly')) {
        var wasDisabled = select.is(':disabled');

        select.attr('disabled', 'disabled');
        select.data('chosen').search_field_disabled();

        if (wasDisabled) {
            select.attr('disabled', 'disabled');
        } else {
            select.removeAttr('disabled');
        }
    }
});
select.trigger('chosen:updated');

select {
    width: 300px;
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.proto.min.js"></script>

<select readonly="readonly">
    <option>option</option>
</select>

我只是不知道如何在这段代码中实现这个复选框逻辑。

我使用的 Jquery 插件是 Chosen 1.7.0

有人可以帮忙吗？

更新：我不明白我做错了什么。它不起作用

    <script>

        var myselect = $('select');
        myselect.chosen();
        $('chosen-change').change(function () {
            myselect.prop('disabled', $(this).is(':checked'));
            myselect.trigger("chosen:updated");
        });

    </script>


<td>Checkbox:</td>
<td>
<asp:CheckBox ID="Trivial_Order" runat="server" 
oncheckedchanged="Trivial_Order_CheckedChanged" AutoPostBack="True"  />



<asp:dropdownlist onkeypress="KeyPress(this.selectedIndex, this.name);return false;" id="ISS_manager"
  class="chosen-select"
  onChange="pressing='';" size="4" Runat="server">
</asp:dropdownlist>

Answer 1

复选框改变时需要触发chosen:updated事件。有关详细信息，请参阅Observing, Updating, and Destroying Chosen 部分。尝试运行下面的代码片段。

var myselect=$('select');
myselect.chosen();
$('input').change(function() {
  myselect.prop('disabled', $(this).is(':checked'));
  myselect.trigger("chosen:updated");
});

select {
  width: 300px;
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.proto.min.js"></script>

<input type="checkbox" />
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

注意。

1. 您在<asp:CheckBox> 控件上使用AutoPostBack="True"。因此，如果单击复选框控件，将自动向服务器发送请求。结果，浏览器将呈现从服务器接收到的新页面。因此，创建的 javascript 处理程序不会完成。
2. 当所需的对象未在 DOM 中创建时，您尝试运行 javascript。
3. 没有chosen-change 元素。

为了避免碰撞：

1. 不要在<asp:CheckBox> 控件上使用自动回发。
2. <script> 元素必须低于您的复选框和选择元素。
3. 更改事件处理程序必须附加到复选框输入。