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

How to disable one radio input from radio group?

本文关键字：收音机 一个 输入 何禁用      更新时间：2023-09-26

如何禁用单选组中的一个单选输入？

<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

我的问题是，我想在点击任何其他按钮后禁用选项1

例如：

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

检查这个Fiddle我刚刚添加了

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

根据要求-张贴小提琴答案

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

尝试

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

http://jsfiddle.net/3CdZU/

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

演示

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

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

演示

既然，在改变之后，就没有回头路了，这是一种更有趣的方式：

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');
});​

现场演示

我使用的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的方法更容易阅读和更短的编码是有必要的，尤其是在其他轻量级的情况下。

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

使用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
    }
});

演示

相关文章：