更新

Question

我的应用程序中有一个复选框和一个下拉菜单：

<div class="panel-body">
                <div class="checkbox-custom checkbox-primary" id="ProxyCheckbox">
                    @Html.CheckBoxFor(a => a.IsProxy)
                    @Html.LabelFor(a => a.IsProxy, "Is Proxy?")
                    @Html.HiddenFor(a => a.IsProxy)
                </div>
                <fieldset>
                    <legend style="display: none">Add Membership Form</legend>
                    <div class="form-group row">
                        @Html.LabelFor(m => m.SocietyId, new { @class = "hidden" })
                        <div class="col-md-12">
                            @Html.DropDownListFor(x => x.SocietyId, societies.Select(s => new SelectListItem
            {
                Text = s.SocietyName,
                Value = s.SocietyId.ToString()
            }), "Please select a society...", new { @class = "form-control", id = "proxySelect" })
                            @Html.ValidationMessageFor(x => x.SocietyId, string.Empty, new { @class = "text-danger" })
                        </div>
                    </div>

当您选中复选框时，我已经编写了一些JQuery来禁用dropdownmenu。但由于某种原因，它不起作用。我正在使用Boostrap 3。

$(document).on('click', '#ProxyCheckbox', function () {
            if ($(this).prop('checked')) {
                $('#proxySelect').attr('disabled', 'disabled');
            } else {
                $('#proxySelect').removeAttr('disabled');
            }
        });

Answer 1

稍微更改上面的代码：

$(document).on('click', '#ProxyCheckbox', function () {
        if ($("#IsProxy").is(':checked')) {
            $('#proxySelect').prop('disabled', 'disabled');
        } else {
            $('#proxySelect').**removeAttr**('disabled');
        }
 });

Answer 2

#ProxyCheckbox是包含复选框的DIV。

首先为IsProxy复选框分配一个ID，例如

id="IsProxy"

然后，如果你想在div上维持click事件：

$(document).on('click', '#ProxyCheckbox', function () {
    $('#proxySelect').prop('disabled', $('#IsProxy').is(':checked'));
 });

如果您想在复选框本身上设置事件：

$('#IsProxy').click(function(){
    $('#proxySelect').prop('disabled', $(this).is(':checked'));
};

更新

在上一个回答中，我使用＆＃34; removeProp＆＃34;，但是，正如Rob所建议的那样，它不适用于已禁用或其他内置属性：http://api.jquery.com/removeprop/

所以我更新了答案，使用更优雅的方式，只需一行指令。

选中复选框后禁用下拉列表

2 个答案:

更新