Javascript 禁用单选按钮

我正在开发一个表单，我需要能够在选择“是”时激活灰色部分，并在选择“否”时禁用它。如果代码可以压缩并简化，那也太好了

$(document).ready(function() {
    $("input:radio[name^='event-type-']").prop( "disabled", true );
    $('#submit').css('color','#ccc');

    $("input:radio[class^='yes-']").click(function() {
        var n= "#"+$(this).parent().attr('id');
        if ($(this).is(':checked')){
            $(n+' input:radio').prop( "disabled", false );
            $('#submit').css('color','#000');
        }

        $("input:radio[class^='no-']").click(function() {
            var n= "#"+$(this).parent().attr('id');
            if ($(this).is(':checked')){
                $(n+' input:radio').prop( "disabled", true );
                $('#submit').css('color','#ccc');
            }else {
                $(n+' input:radio').prop( "disabled", true );
                $(n+' input:radio').prop( "checked", false );
                $('#submit').css('color','#ccc');
            }
        });

    });

}); 

---

您几乎拥有了它，但是您同时禁用了是/否按钮，并且您的选择器与

文本区域不匹配

现在，有关更简单的代码，请参见：

我改变了什么


我更改了CSS选择器以匹配“元素下的所有内容与id
submit
”（这是您的
fieldset
）。这不包括是/否按钮，但包括以前遗漏的
文本区域
当一个单选按钮发送一个点击事件时，它会被自动选中，因此您不必检查
is（':checked'）
类似地，您的上一个
else
分支从未被调用
我现在也正在清除
文本区域
我将第二个
单击功能移到了第一个功能之外

您几乎拥有了它，但是您同时禁用了是/否按钮，并且您的选择器与
文本区域不匹配

现在，有关更简单的代码，请参见：

我改变了什么


我更改了CSS选择器以匹配“元素下的所有内容与id
submit
”（这是您的
fieldset
）。这不包括是/否按钮，但包括以前遗漏的
文本区域
当一个单选按钮发送一个点击事件时，它会被自动选中，因此您不必检查
is（':checked'）
类似地，您的上一个
else
分支从未被调用
我现在也正在清除
文本区域
我将第二个
单击功能移到了第一个功能之外

遵循您的代码，这可能会修复它：


$（文档）.ready（函数（）{
$（“输入：radio[name^='event-type-']”）prop（“disabled”，true）；
$（'#submit'）.css（'color'，'#ccc'）；
$（“输入：收音机[class^='yes-']）。单击（函数（）{
var n=“#”+$（this.parent（）.attr（'id'）；
如果（$（this）.is（':checked'））{
$（n+‘输入：收音机’）.prop（“禁用”，false）；
$（'#submit'）.css（'color'，'#000'）；
}
});
$（“输入：radio[class^='no-']）。单击（函数（）{
var n=“#”+$（this.parent（）.attr（'id'）；
$（n+‘输入：收音机’）.prop（“禁用”，真）；
$（n+‘输入：收音机’）.prop（“选中”，false）；
$（'#submit'）.css（'color'，'#ccc'）；
$（“输入：radio[class^='yes-']”）prop（“disabled”，false）；
$（“输入：radio[class^='no-']”）prop（“disabled”，false）；
$（“输入：radio[class^='no-']”）prop（“选中”，true）；
});
}); 

对
不
事件类型*

请检查最能描述您的事件的事件类型
此表格必须在活动日期前两周提交

会合


研讨会


面板


训练


研讨会


其他



遵循您的代码，这可能会修复它：


$（文档）.ready（函数（）{
$（“输入：radio[name^='event-type-']”）prop（“disabled”，true）；
$（'#submit'）.css（'color'，'#ccc'）；
$（“输入：收音机[class^='yes-']）。单击（函数（）{
var n=“#”+$（this.parent（）.attr（'id'）；
如果（$（this）.is（':checked'））{
$（n+‘输入：收音机’）.prop（“禁用”，false）；
$（'#submit'）.css（'color'，'#000'）；
}
});
$（“输入：radio[class^='no-']）。单击（函数（）{
var n=“#”+$（this.parent（）.attr（'id'）；
$（n+‘输入：收音机’）.prop（“禁用”，真）；
$（n+‘输入：收音机’）.prop（“选中”，false）；
$（'#submit'）.css（'color'，'#ccc'）；
$（“输入：radio[class^='yes-']”）prop（“disabled”，false）；
$（“输入：radio[class^='no-']”）prop（“disabled”，false）；
$（“输入：radio[class^='no-']”）prop（“选中”，true）；
});
}); 

对
不
事件类型*

请检查最能描述您的事件的事件类型
此表格必须在活动日期前两周提交

会合


研讨会


面板


训练


研讨会


其他




单击“否”（值为2）时，将禁用所有输入和文本区域，并将字体颜色更改为灰色。当您单击yes（值1）时，它将启用它并使字体变为黑色

单击“否”（值为2）时，将禁用所有输入和文本区域，并将字体颜色更改为灰色。当您单击yes（值1）时，它将启用它并使字体变为黑色。
谢谢，这正是我所需要的。如果我想将此应用于相互独立的多个部分，该怎么办？谢谢，这正是我所需要的。如果我想将此应用于相互独立的多个部分，该怎么办？
$(document).ready(function() {
  $('#submit *').prop( "disabled", true );
  $('#submit *').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
    $('#submit *').prop( "disabled", false );
    $('#submit *').css('color','#000');
  });
  $("input:radio[class^='no-']").click(function() {
    $('#submit *').prop( "disabled", true );
    $('#submit input').prop( "checked", false );
    $('#submit textarea').prop( "value", "");
    $('#submit *').css('color','#ccc');
  });
});

$('input[name="1"]').click(function() {
  var value = $(this).val();
  if (value === "2") {
    $('#submit input, textarea').prop('disabled', true);
    $('#submit').css('color', '#ccc');
  } else {
    $('#submit input, textarea').prop('disabled', false);
    $('#submit').css('color', '#000');
  }
});