如何用jQuery在页面加载时禁用存在选中项的单选按钮组？

问题根源 #

你之前的代码只针对单个选中的单选按钮设置禁用，没考虑到单选按钮是通过name属性分组的——同一组的单选按钮name完全相同，所以要通过name定位整个组来批量禁用。

修复后的jQuery代码 #

把你原来的代码替换成下面这段：

$(document).ready(function() {
    // 遍历所有已选中的单选按钮
    $('input[type="radio"]:checked').each(function() {
        // 获取当前按钮所在组的name属性值
        var groupName = $(this).attr('name');
        // 禁用该name对应的所有单选按钮
        $('input[type="radio"][name="' + groupName + '"]').prop('disabled', true);
    });
});

适配Razor页面的注意点 #

• Razor生成的单选按钮（比如@Html.RadioButtonFor）会自动给同一组的按钮设置相同的name，不用手动调整；如果是手写HTML，必须保证同一组的单选按钮name完全一致，大小写也不能错。
• 这段代码要放在页面加载完成的回调里，确保所有DOM元素都渲染完毕后执行。

验证效果 #

比如Meat组的单选按钮name都是MeatType，选中Chicken保存回发后，整个Meat组的所有按钮都会被禁用，其他未选中的组（比如Vegetable组）依然可以正常交互。

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