【问题标题】：How to disable one radio input from radio group?如何禁用无线电组中的一个无线电输入？
【发布时间】：2012-03-23 06:13:51
【问题描述】：

如何禁用收音机组中的一个收音机输入？

<input type="radio" name="radiogrp" value="op1" checked="checked">Option1
<input type="radio" name="radiogrp" value="op2"> Option2
<input type="radio" name="radiogrp" value="op3" > Option3
<input type="radio" name="radiogrp" value="op4"> Option4

我的问题是我想在点击任何其他按钮后禁用 option1

例如：

当我选择选项2时，应该禁用选项1

【问题讨论】：

看updated answer我为它加了一个很酷的方法。

标签： javascript jquery

【解决方案1】：

检查这个Fiddle我刚刚添加了

如果这不是你想要的，请告诉我

根据要求 - 发布小提琴答案

$('.rd').click(function(){
    $('.rd[value="op1"]').attr('disabled', 'disabled');       
});

【讨论】：

它在检查答案时会出现一些错误，例如“您可以在 1 分钟内接受答案”... :(
你应该在这里发布答案，而不是在 jsfiddle
然后您选择了两次单选按钮，而不是缓存选择器结果。
@gdoron - 我必须对值进行第二次选择，我无法缓存整个内容。无意义
错误...见my answer。您可以使用jsPerf 对其进行测试，您会注意到其中的不同。

【解决方案2】：

试试

$('input[value="op2"]').click(function(e)
     {
         $('input[value="op1"]').attr('disabled', 'disabled');
     });

http://jsfiddle.net/3CdZU/

【讨论】：

【解决方案3】：

$(":radio").change(function(){

    $(":radio[name='radiogrp']").slice(0,1).attr("disabled","disabled");
});

DEMO

【讨论】：

@enigma : 我只想禁用选项 1，其中必须启用选项 2、选项 3、选项 4
@enigma ：它仍然不起作用，它禁用了最后选择的选项
再次更新，但已经发布了其他正确答案
yupppp，但谢谢你的时间:)
您应该缓存选择器结果。并且可以使用.eq(0) 来获取第一个元素。

【解决方案4】：

var radios = $('input[type="radio"][name="radiogrp"]');
radios.change(function() {
    if (this.value != "op1") {
        radios.filter('[value="op1"]').prop('disabled', true);
    }
});

我缓存了单选按钮，所以我不需要查询 DOM 两次。

DEMO

既然改变了，就没有回头路了，这样更好玩：

var radios = $('input[type="radio"][name="radiogrp"]');
var first = $('input[type="radio"][name="radiogrp"][value="op1"]');
radios.not(first).change(function() {
    alert('changed'); // getting called only once.
    first.prop('disabled', true);
    radios.unbind('change');
});

LIVE DEMO

【讨论】：

@gdoron - 是的，我同意。这是一种更好的方法，并且您还使用了 prop - 我认为这是新方法。它与 attr 有何不同？
@ITppl。缺少{再试一次
@gdoron : 现在是 5n，谢谢 ... :)
@JibiAbraham。阅读this
@gdoron TX。我会调查一下

【解决方案5】：

我正在使用带有精美动态样式的 jquery mobile，我发现在执行禁用后，我需要使用 checkboxradio("refresh") 方法调用显式发出刷新，以便样式反映更改。不过，您可以链接方法调用，因此它可能如下所示：

$('.rd').click(function(){
  $('.rd[value="op1"]').attr('disabled', 'disabled').checkboxradio("refresh");
});

http://view.jquerymobile.com/1.3.2/dist/demos/faq/updating-the-value-of-enhanced-form-elements-does-not-work.html

虽然我欣赏 gdoron 更深入、更技术、更高效、更全面的方法，但我相信有时（只是有时）Jibi Abraham 的方法更易于阅读和编码更短是有必要的，尤其是在其他轻量级的情况下。

我意识到这不是一个明确的答案，但我还没有足够的声誉来发表评论。

【讨论】：

【解决方案6】：

很简单，使用 jQuery 的属性选择器。这是一个禁用值为op3的单选按钮的示例

$('input[value="op3"]').attr('disabled', 'disabled');

Demo

这是您的解决方案

var radios =  $('input[name=radiogrp]'); //Cache all the radio button
radios.click(function() { 
//Attach a function to the click event of all radio button

    if(this.value!='op1') { //Check if currently click button has value of op1
        radios.filter('[value="op1"]').prop('disabled', true); //if not disable the first
    }
});

Demo

【讨论】：

1. 使用prop 而不是attr。 2. $(this).val() => this.value 3. 缓存选择器结果。
@gdoron，一件事是this.value 比$(this).val() 快？
是的，它不需要创建 jQuery 对象。并且做很多事情只是为了获得价值。
你仍然选择了两次 DOM
我想念prop 函数。