防止用户更改单选按钮的状态

Posted 2023-03-05

【中文标题】防止用户更改单选按钮的状态

【英文标题】：preventing a user from changing the state of a radio button

【发布时间】：2011-10-30 06:45:15

【问题描述】：

我试图阻止用户使用 jquery 或 javascript 更改单选按钮的状态。我可以用 disabled 属性做到这一点，但我不喜欢灰色的外观。我正在向用户展示我的一个模型的真/假状态，所以我不希望他们能够更改它。根据模型，组中只有一个单选按钮被选中 (true) 或未选中 (false)，因此他们无法取消选中它，但他们可以检查和更改单选按钮状态。单选按钮不会以表单形式提交，因此它仅用于从数据库/模型中读取，但如果他们将其更改为数据库中实际存在的相反值，这将是一个糟糕的用户体验。这是我对 jquery 和 html 结构的最新尝试。

<input type="radio" checked="checked">

或

<input type="radio">

和jquery

$(document).ready(function () 
    $(input[type = "radio"]).change(function () 
        $(this).removeAttr("checked");
    );
);

【参考方案1】：

怎么样

<input type="radio" onclick="return false;"/>

或

$(document).ready(function () 
    $(input[type = "radio"]).click(function () 
        return false;
    );
);

?

【讨论】：

这就是我要找的东西

【参考方案2】：

试试这个

$(document).ready(function () 
    $('input[type = "radio"]').change(function () 
        return false;
    );
);

【讨论】：

this.checked = false;意味着 le 单选按钮将始终处于未选中状态。如果在页面加载时默认选中按钮怎么办？单击会取消选中它，但我们希望它保持不变。返回 false 似乎是一个更好的主意。

【参考方案3】：

尝试使用 disabled 属性，因为这是它的用途，然后使用 CSS 更改单选按钮的样式。

但是，这听起来不像是一种非常直观的用户体验。用户知道变灰是什么意思，你可能不应该混淆它！

【参考方案4】：

所以一旦我的选择器上的引号正确，它就起作用了。

$("input[type = radio]") 

或

$("input[type = 'radio']")

更改功能的代码有很多或选项

this = false;
$(this).prop("checked", false);
$(this).attr("checked", false);
$(this).removeAttr("checked");
$(this).removeProp("checked");

使用一个比另一个有优势吗？操作标签的属性/属性的四个 jquery 函数中的任何一个之间有区别吗？根据文档，prop/removeProp 似乎是在 1.6 中添加的，而 attr/removeAttr 是在 1.0 中添加的，所以 attr/removeAttr 只是出于遗留目的还是 jquery 建议使用另一个？