如何让jQuery在页面加载时禁用单选按钮列表的指定选项？

问题描述 #

我有一个渲染后的单选按钮列表，代码如下：

<input id="rblOD_1" type="radio" name="ctl00$ContentPlaceHolder1$rblOD" value="1">
<input id="rblOD_2" type="radio" name="ctl00$ContentPlaceHolder1$rblOD" value="2">
<input id="rblOD_3" type="radio" name="ctl00$ContentPlaceHolder1$rblOD" value="3">

我希望页面加载时仅禁用最后一项，完成数据库校验后再启用它。我使用以下代码尝试实现：

$("input:radio[name='ctl00$ContentPlaceHolder1$rblOD'][value='3']")
    .attr('disabled', 'disabled');

该代码在页面加载时不生效，但在单选按钮列表的change事件中有效。请问如何让它在页面加载时或无需点击/change事件即可生效？

解决方案 #

1. 确保代码在DOM完全加载后执行 #

代码加载时不生效的核心原因是执行时机过早，目标DOM元素还未渲染完成。将代码包裹在jQuery的DOM就绪回调中，确保DOM加载完成后再执行操作：

$(document).ready(function() {
    $("input:radio[name='ctl00$ContentPlaceHolder1$rblOD'][value='3']")
        .prop('disabled', true);
});

也可以使用更简洁的简写形式：

$(function() {
    $("input:radio[name='ctl00$ContentPlaceHolder1$rblOD'][value='3']")
        .prop('disabled', true);
});

2. 用prop()替代attr()控制禁用状态 #

对于disabled这类布尔型DOM属性，jQuery的prop()方法比attr()更可靠。attr()操作的是HTML标签上的属性，而prop()直接操作DOM元素的属性值，动态修改状态时表现更稳定。

3. 直接在HTML中初始禁用（可选） #

如果后端渲染页面时可以控制HTML输出，直接给目标单选按钮添加disabled属性，页面加载后就会自动处于禁用状态，后续完成校验后再用JS启用：

<input id="rblOD_3" type="radio" name="ctl00$ContentPlaceHolder1$rblOD" value="3" disabled>

启用时执行代码：

$("input:radio[name='ctl00$ContentPlaceHolder1$rblOD'][value='3']")
    .prop('disabled', false);

内容的提问来源于stack exchange，提问作者JohnnyCage