【问题标题】:How to make disabled/readonly functionality for radio buttons and checkboxes如何为单选按钮和复选框设置禁用/只读功能
【发布时间】:2012-05-21 22:35:07
【问题描述】:

我知道我们不能使 只读 单选按钮和复选框。我试图禁用单选按钮和复选框,但在 IE 中它不可见。

是否有任何替代方法可以使用 jQuery、CSS、JavaScript 像 disabled / readonly 一样做同样的事情?

【问题讨论】:

  • 是的,但它与您已经尝试过的完全相同,将 disabled 属性设置为 disabled 等。
  • 你在做什么代码..
  • 检查这个问题的公认答案:stackoverflow.com/questions/1953017/… 它可以很好地使单选按钮有效地只读。

标签: javascript jquery html css


【解决方案1】:

您可以使用以下代码来避免点击您不希望用户更改的元素

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

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

【讨论】:

  • 感谢它有效。是否可以将背景颜色应用于单选按钮和复选框,以便在不使用图像的情况下看起来像已禁用?我尝试使用 $(':radio,:checkbox').css("background-color", 'red");
  • 我认为你做不到。为此,您必须使用某种图像。但是如果你想给它一个禁用的效果,最好禁用它;那么它在所有浏览器上看起来都是一致的。我以为你想禁用没有禁用效果的复选框/单选按钮。
  • 是的,你是对的。我想禁用类似功能而没有禁用效果。如果我指定禁用复选框和单选按钮,则它在 IE 中不清晰可见。
  • 这在 IE 中有一个不幸的副作用(测试于 2011 年 9 月 10 日):如果您单击未选中的按钮,选中的按钮会在视觉上“取消选中”。
【解决方案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);

【讨论】:

  • 我知道这已经过时了,但对于任何想使用此解决方案的人,请记住,提交表单时不会发布禁用的元素。
【解决方案3】:
selectedRow
    .find('input[type="radio"]:not(:checked)')
    .each(function(){
        $(this).attr('disabled', true);
});

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

因此,给了我想要的结果,即禁用未选中的单选按钮,同时保持选中的选项。

这个结果似乎是一个更好的选择,那么
1. 在单选按钮上放置图像,以避免用户选择另一个选项。
2..click(function(){ return false; }),它只是在选择未选中的选项时隐藏选择 3. 禁用所有单选按钮,选择丢失。

希望对你有帮助,
干杯。

【讨论】:

    【解决方案4】:

    如果单选按钮已被选中,并且如果您单击选中的单选按钮,它会将值从 true 更改为 false。对于这种情况,以下代码有效

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

    【讨论】:

      猜你喜欢
      • 2013-10-03
      • 1970-01-01
      • 2016-11-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多