Отключить раскрывающийся список, когда установлен флажок

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 для отключения выпадающего меню, когда вы устанавливаете флажок.Но по некоторым причинам это не работает.Я использую 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, содержащий флажок.

Сначала присвойте ID флажку IsProxy, например,

id="IsProxy"

Затем, если вы хотите сохранить событие click дляdiv:

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

Если вы хотите установить событие на самом флажке:

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

Обновление:

В предыдущем ответе я использовал «removeProp»,но, как предложил Роб, он не работает с отключенными или другими встроенными свойствами: http://api.jquery.com/removeprop/

Поэтому я обновил ответ, чтобы использовать более элегантный способ, используя всего одну строковую инструкцию.