ASP.NET MVC 在页面加载时禁用下拉列表

Question

我正在使用 ASP.NET MVC 4 和 jQuery 来实现这一点。

我要做的是根据复选框是否被选中来禁用或启用下拉列表。

我可以让它工作，但是我似乎无法在页面加载时禁用下拉列表。语句被执行，但元素没有被禁用。

我认为问题是，在填充下拉列表（来自视图模型）之前执行检查，并且数据以某种方式覆盖？

这是我的 HTML：

<p>
    @Html.CheckBoxFor(model => model.RoomRequired, new { id= "room-required" })
    <label>Room Required</label>
</p>
<p>
    <label>Room Options</label>
    @Html.DropDownListFor(model => model.OptionId, new SelectList(Model.RoomOptions, "Id", "Name"), "Select option", new { id="option-select })
</p>

并修复了 Javascript：

$(document).ready(function () {    
    $('#room-required').change(function () {
     $('#option-select').prop('disabled', $(this).is(':checked'));
    });

    $('#room-required').trigger('change');
});

Answer 1

.prop() 是更改disabled 属性的首选，您可以将其传递给布尔值，因此您的代码可以简化为：

$('#option-select').prop('disabled', $('#room-required').is(':checked'));

或完整代码：

$(document).ready(function () {    
    $('#room-required').change(function () {
         $('#option-select').prop('disabled', $(this).is(':checked'));
    });

    $('#room-required').trigger('change');
});

Fiddle

Answer 2

我解决了这个问题。出于某种原因，jQuery 重新启用了下拉列表。我不得不向 HTML 页面本身添加一个 javascript 脚本并在其中触发更改事件。 我知道这不是最好的解决方案，但它是一种适合我的解决方法。

Answer 3

attr() 所做的是将第二个参数中的值分配给 HTML 元素的指定属性。我们想要<input disabled="disabled" /> 而不是<input disabled="true" />。

所以，使用 -

$('#option-select').attr('disabled', 'disabled');

而不是-

$('#option-select').attr('disabled', 'true');