選中復選框時禁用下拉列表？

Question

MVC中的“我的視圖”代碼：選中復選框后，我想在“視圖代碼”中禁用下拉列表。

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

>和我的下拉列表：

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