如何为单选按钮和复选框创建禁用/只读功能

Question

我知道我们不能使单选按钮和复选框只读。我尝试禁用单选按钮和复选框，但在IE浏览器中不可见。

是否有类似于使用jQuery、CSS、JavaScript的“disabled”/“readonly”的替代方法？

- Raje

---

是的，但它与您已经尝试过的完全相同，将禁用属性设置为禁用等。 - adeneo

你为此写了什么代码？ - Javascript Coder

请查看此问题的已接受答案：https://dev59.com/snI-5IYBdhLWcg3wPFx2 它可以很好地使单选按钮有效地只读。 - mcv

Answer 1

您可以使用以下代码来避免用户更改不想更改的元素。

$(':radio,:checkbox').click(function(){
    return false;
});

您可以使用正确的选择器来限制点击次数。

- LoneWOLFs

---

谢谢，它有效。是否可以将背景颜色应用于单选按钮和复选框，使其看起来像是禁用状态，而不使用图像？我尝试使用$(':radio,:checkbox').css("background-color", 'red"); - Raje

我认为你不能这样做。你必须使用某种图像来实现这个目的。但是，如果你想要给它一个禁用的效果，最好是将其禁用；这样它在所有浏览器上看起来都一致。我以为你想要在没有禁用效果的情况下禁用复选框/单选按钮。 - LoneWOLFs

是的，你说得对。我想要禁用类似的功能，但不想禁用效果。如果我指定复选框和单选按钮为禁用状态，在 IE 中它们不明显可见。 - Raje

这在IE中有一个不幸的副作用（测试了9/10/11）：如果您单击未选中的按钮，则选中的按钮会在视觉上“取消选中”。 - Georgii Ivankin

Answer 2

你可以这样编写代码：

在你的脚本中：

 jQuery('#radio').attr('disabled','disabled');

或者您可以根据自己的需求添加类别。

如果不兼容IE，请提供兼容性。

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

然后检查一下...

您也可以尝试这个：

jQuery("#youridname input:radio").attr('disabled',true);

- Javascript Coder

---

我知道这已经过时了，但是对于任何想要使用此解决方案的人，请记住，在提交表单时，禁用的元素将不会被发布。 - blackandorangecat

Answer 3

selectedRow
    .find('input[type="radio"]:not(:checked)')
    .each(function(){
        $(this).attr('disabled', true);
});

所选中的行就是我想要定位感兴趣的单选按钮下面的HTML元素。
整个脚本只有在选择单选按钮后才会调用。
执行时，它会找到未选中的单选按钮并将它们禁用。

因此，它给我提供了所需的结果，即禁用非选定单选按钮，同时保持选定选项。

这个结果似乎比以下几种更好：
1. 在单选按钮上放置图像，以避免用户选择另一个选项。
2. .click(function(){ return false; })，当未选定的选项被选中时，仅隐藏选择
3. 禁用所有单选按钮，其中选择丢失。

希望这可以帮助你，
干杯。

- driven4ward

Answer 4

如果单选按钮已经被选中，而你再次点击已选中的单选按钮，它会将值从 true 改为 false。对于这种情况，以下代码可以解决问题。

$(document).ready(function () {
    $('input[type = "radio"]').change(function () {
        this.checked = false;
    });
});

- Raje