Question

我在MVC中的视图代码：我想在选中复选框时禁用View代码中的Dropdownlist。

function SaveNewGroup() {

    var group = RetrieveGroup();
    var IsChecked = $(IsAssociation).is(":checked");
    var url = (IsChecked) ? "/Administration/SaveNewGroupforIsAssociation" : "/Administration/SaveNewGroup";
    var userID = $('#groupunderwriter').val();

    $.ajax({
        type: "POST",
        url: url,
        data: group,
        datatype: "json",
        success: function (groupID) {
            if (groupID > 0) {

                GetGroups();

                $('#groupdialog').dialog('close');
            }
            else {
                alert("Unable to create Group.");
            }
        }
    });
}

复选框：

<tr>
            <td>
                <label>Is Association</label></td>
            <td>
                <input type ="checkbox" id="IsAssociation"/>
            </td

＆GT; 和我的下拉列表：

<tr>
<td>Underwriter Name:</td>
        <td>
            <select id="groupunderwriter" style="width:150px;">
                <option value ="0"></option>
               @foreach (RMS.UserService.User u in Model.GroupUnderWriters)
                {
                    <option value="@u.UserID">
                        @if(Model.MasterGroupAttribute.UserID == u.UserID)
                   {
                       @:selected="selected"
                   }
                   >@(u.FirstName + " " + u.LastName )</option>

                }
            </select>
        </td>

    </tr>

如何在选中复选框时禁用下拉列表，或在未选中时启用它？

Answer 1

我看不到任何复选框，无论如何这是禁用下拉复选框的简单jquery代码。

$(function() {
  $('#id_of_your_checkbox').change(function() {
    if ($(this).is(':checked')) {
        // disable the dropdown:
        $('#id_of_dropdown').attr('disabled', 'disabled');
    } else {
        $('#id_of_dropdown').removeAttr('disabled');
    }
  });
});

Answer 2

简短版本如下：

$('#IsAssociation').change(function() {
    $('#groupunderwriter').attr('disabled', $(this).is(':checked'));
});

Answer 3

我认为prop是一种更好的方法。

$("#groupunderwriter").prop("disabled", IsChecked);

当然，您也可以使用$("#checkbox").is(":checked")代替IsChecked。

Answer 4

看看这个小提琴。这对我来说可以。我不知道为什么以上所有都不适合你。我刚刚使用了jQuery ON事件监听器，以防您遇到竞争条件，并且在为它们创建绑定时这些元素不存在。不太可能，但嘿，我的例子有效。这不是理想的做法，但它可以让您对代码的任何问题有所了解。

<input type ="checkbox" id="IsAssociation" /><span>your checkbox</span>
<br/>
<br/>
<select id="groupunderwriter" style="width:150px;">
   <option value ="0">Hello</option>
    <option value ="1">Goodbye</option>
</select>

$(document).on('change', '#IsAssociation', function(){
    if($(this).prop('checked')){
        $('#groupunderwriter').attr('disabled', 'disabled');
    } else {
        $('#groupunderwriter').removeAttr('disabled');
    }
});

http://jsfiddle.net/T83vs/

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

4 个答案: