使用 jQuery 禁用单选按钮答案

【问题标题】：Disabling radio buttons with jQuery使用 jQuery 禁用单选按钮
【发布时间】：2009-09-10 17:10:05
【问题描述】：

我试图在单击 loadActive 链接时禁用这些单选按钮，但由于某种原因，它只会禁用顺序中的第一个，然后跳过其余的。

<form id="chatTickets" method="post" action="/admin/index.cfm/">
    <input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
    <input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
<a href="#" title="Load ActiveChat" id="loadActive">Load Active</a>

这是我正在使用的 jquery：

jQuery("#loadActive").click(function() {
    //I have other code in here that runs before this function call
    writeData();
});
function writeData() {
    jQuery("input[name='ticketID']").each(function(i) {
    jQuery(this).attr('disabled', 'disabled');
});
}

【问题讨论】：

你试过用firebug，用选择器获取一个数组，看看数组有多少个？
你所拥有的一切对我来说都很好。
是的，它也可以在我的沙箱中工作，尽管这是来自一个更大的文件，但我认为其他原因使它无法工作。使用类，以不同的方式选择它仍然只会禁用第一个收音机，而不是其余的。但是在沙盒中它工作得很好哦
那么它必须与您向我们展示的内容不同。

标签： jquery

【解决方案1】：

删除您的“每个”并使用：

$('input[name=ticketID]').attr("disabled",true);

就这么简单。有效

【讨论】：

【解决方案2】：

我已经稍微重构了你的代码，这应该可以工作：

jQuery("#loadActive").click(writeData);

function writeData() {
    jQuery("#chatTickets input:radio").attr('disabled',true);
}

如果表单上有两个以上的单选按钮，则必须修改选择器，例如，您可以使用starts with attribute filter 来选择 ID 以 ticketID 开头的单选：

function writeData() {
    jQuery("#chatTickets input[id^=ticketID]:radio").attr('disabled',true);
}

【讨论】：

这将禁用该表单中的每个单选按钮。在他的问题中可能只有两个，但可能会更多。
@geowa4 - 是的，我认为这些是他表格中唯一的收音机。无论如何，我已经编辑得更有用了。
+1 删除无用的.each()； .attr() 无论如何都会应用于所有选定的元素。
这段代码已经过时了。使用下面 KCOtzen 的方法。

【解决方案3】：

首先，有效的语法是

jQuery("input[name=ticketID]")

第二，你试过了吗：

jQuery(":radio")

改为？

第三，为什么不为所有单选按钮分配一个类，然后按类选择它们？

【讨论】：

其实 "input[name='ticketID']" 是合法的语法，单引号不是必须的。
为什么不直接使用这个名字呢？并以此选择它们？它应该可以正常工作；我已经做了一百万次了。
我同意 mkoryak：“为所有单选按钮分配一个类，并按类选择它们”
那么当名称足够时，您必须同时维护类名和名称
我认为我们应该在优化之前解决他的问题。

【解决方案4】：

只需使用 jQuery prop

 $(".radio-button").prop("disabled", false);
 $(".radio-button").prop("disabled", true); // disable

【讨论】：

【解决方案5】：

我刚刚使用您的代码构建了一个沙盒环境，它对我有用。这是我使用的：

<html>
  <head>
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <form id="chatTickets" method="post" action="/admin/index.cfm/">
      <input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
      <input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
    </form>
    <a href="#" title="Load ActiveChat" id="loadActive">Load Active</a>

    <script>
      jQuery("#loadActive").click(function() {
        //I have other code in here that runs before this function call
        writeData();
      });
      function writeData() {
        jQuery("input[name='ticketID']").each(function(i) {
            jQuery(this).attr('disabled', 'disabled');
        });
      }
    </script>
  </body>
</html>

我在 FF3.5 中测试过，现在转移到 IE8。它在 IE8 中也可以正常工作。你用的是什么浏览器？

【讨论】：

【解决方案6】：

代码：

function writeData() {
    jQuery("#chatTickets input:radio[id^=ticketID]:first").attr('disabled', true);
    return false;
}

另请参阅：Selector/radio、Selector/attributeStartsWith、Selector/first

【讨论】：

很确定这与 OP 想要的完全相反。

【解决方案7】：

你可以试试这个代码。

var radioBtn = $('<input type="radio" name="ticketID1" value="myvalue1">');
if('some condition'){
    $(radioBtn).attr('disabled', true); // Disable the radio button.
    $('.span_class').css('opacity', '.2'); // Set opacity to .2 to mute the text in front of the radio button.
}else{
    $(radioBtn).attr('disabled', false);
    $('.span_class').css('opacity', '1');
}

【讨论】：