Question

我在jQuery中真的很新，我在查看复选框时如何通过id禁用下拉列表时遇到了困难。

逻辑看起来像这样。

1）如果启用（选中）复选框，则禁用下拉菜单 2）如果禁用（未选中）复选框，则启用下拉列表

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

＆＃13;

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

＆＃13;

select {
    width: 300px;
}

＆＃13;

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

＆＃13;

我无法弄清楚如何在此代码中实现此复选框逻辑。

我使用的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部分。尝试在下面运行代码snipeet。

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>

注意。

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

避免碰撞：

请勿自动回复<asp:CheckBox>控件。
<script>元素必须在您的chechbox下方并选择元素。
更改事件处理程序必须附加到复选框输入。

启用复选框时，jQuery选择下拉列表不可用

1 个答案: