【问题标题】：How to enable radio group by checkbox?如何通过复选框启用单选组？
【发布时间】：2012-11-10 10:35:18
【问题描述】：

我确实搜索了所有内容，但我仍然无法修复它。请帮忙：

这是我的js代码：

<script type="text/javascript">
    $(document).ready(function() {
        $("#email_acc").click(function() {
            if ( $(this).is(":checked") ) {
                $("#email_group").attr("enabled","enabled");
            }
        });  

        $("#system_acc").click(function() {
            if ( $(this).is(":checked") ) {
                $("#system_group").attr("enabled","enabled");
            }
        }); 
    });
</script>

下面是我的html代码：

<input type="checkbox" name="email_acc" id="email_acc" />Email Account
<input type="checkbox" name="sys_acc" id="sys_acc" />System Account

<input type="radio" name="radio_email" value="create" class="email_group" id="radio_email_0" disabled="disabled"/>New
<input type="radio" name="radio_email" value="change" id="radio_email_1" disabled="disabled"/>Change
<input type="radio" name="radio_email" value="terminate" id="radio_email_2" disabled="disabled"\ />Termination

<input type="radio" name="radio_system" value="create" class="system_group" id="radio_system_0" disabled="disabled"/>New
<input type="radio" name="radio_system" value="change" id="radio_system_1" disabled="disabled" />Change
<input type="radio" name="radio_system" value="terminate" id="radio_system_2" disabled="disabled" />Termination

我不知道是什么问题。它只是不起作用。

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

$("#email_acc").click(function()
    {
        if ( $(this).is(":checked") )
        {
            $("#email_group").attr("disabled","false");
                  or
            $("#email_group").attr("disabled",false);
        }
    });

【讨论】：

【解决方案2】：

$(document).ready(function() 
{

    $("#email_acc").click(function()
    { 
        if ( $(this).is(":checked") ) 
        {  
            $("input[name='radio_email']").removeAttr("disabled");
           //      ^----------------enable all the checkbox with common name
        }
    });  

    $("#sys_acc").click(function()
   //     ^---------corrected id
    {
        if ( $(this).is(":checked") )
        {   $("input[name='radio_system']").removeAttr("disabled");
       //         ^----------------enable all the checkbox with common name
        }
    }); 
});

DEMO

DEMO 2

根据 OP 的新要求更新代码，感谢 nnnnnn 清理代码

更新DEMO 3

【讨论】：

在演示中，当复选框未选中时，单选按钮不会返回。
它现在可以工作了！~这太棒了！~非常感谢你；D 顺便问一下，当再次取消选中复选框时如何禁用无线电组？
@Derek OP 问题没有提及任何相关内容
@Derek 我的错误，我没有阅读该评论，但我已经更新了我的代码
@Newbie 选择对你最有帮助的答案，并在新问题中提出你的新疑问，总会有人帮助你

【解决方案3】：

没有"enabled" 属性或属性，只有"disabled" 属性或属性可以设置为false 以启用相关元素。（“属性”在您的源 html 中，但对“属性”进行了动态更改，将其设置为布尔值以禁用或不禁用。）

除非使用旧版本的 jQuery，否则您应该使用 .prop() method 来更新此属性。要启用整组单选按钮，您必须通过它们的 name 属性将它们全部选中（或者给它们一个通用的 class 并通过它进行选择）。

$("#email_acc").click(function() { 
    if ( this.checked ) {  
        $('input[name="radio_email"]').prop('disabled', false);
    }
});

// and the same for the other checkbox and group.

请注意，您的第二个复选框有一个 id="sys_acc"，但您的 JS 尝试使用 "#system_acc" 进行选择 - 您需要确保它们匹配。

如果您需要在未选中复选框的情况下再次禁用该组，那么您可以执行以下操作，删除 if 语句并将 disabled 属性设置为 checked 属性的倒数：

$('#email_acc').click(function() { 
    $('input[name="radio_email"]').prop('disabled', !this.checked);
});

// and again the same idea for the other checkbox and group.

演示：http://jsfiddle.net/UqTB3/

请注意，在这两种情况下，我都使用了this.checked 而不是$(this).is(":checked")：我发现前者更容易阅读，而且直接检查DOM 元素的checked 属性比创建jQuery 对象更有效并使用.is(":checked")。但是，如果您真的热衷于将 jQuery 用于所有内容，则可以进行适当的替换。

【讨论】：

【解决方案4】：

在输入 html 中添加名称

名称应该相同

<script type="text/javascript">
   document.getElementById('cek3').onchange = function () {
       document.getElementById('fasilitas_kost1').disabled = !this.checked;
       document.getElementById('fasilitas_kost2').disabled = !this.checked;
       document.getElementById('fasilitas_kost3').disabled = !this.checked;
       document.getElementById('fasilitas_kost4').disabled = !this.checked;
       document.getElementById('fasilitas_kost5').disabled = !this.checked;
       document.getElementById('fasilitas_kost6').disabled = !this.checked;
       document.getElementById('fasilitas_kost7').disabled = !this.checked;
   };
</script>

【讨论】：