启用和禁用所有子元素

Enabling and disabling all the child elements

本文关键字：元素 启用      更新时间：2023-09-26

如果字段的其他部分有特定值，我会启用和禁用字段的部分。考虑html代码的jsfiddle
条件是

  1. 如果partA的所有字段都选择为No，则启用partB
  2. 如果partB的所有字段都选择为No，则启用partC

尝试1
首先我尝试禁用PartB和PartC的元素，但这些元素不起作用。

$(function () {
   $('.group').attr('name','partB').find('input').attr('disable', true);
   $('.group').attr('name','partC').find('input').attr('disable', true);                        
});

我不确定如何确保group分区中的所有子元素都选择为No。

jsBin演示

拥有这个HTML:

<div class="group" id="partA">
    <span> PART A</span><br/>
    Option 1
    <input type="radio" name="optionsRadios1"  value="option1"/>Yes
    <input type="radio" name="optionsRadios1"  value="option2"/>No
    <br />
    Option 2
    <input type="radio" name="optionsRadios2"  value="option1"/>Yes
    <input type="radio" name="optionsRadios2"  value="option2"/>No
</div>

jQ:

$(function () {
  $('#partB, #partC').find('input').prop('disabled', true);
  function testChecked(){
    var $par = $(this).closest('.group');
    var $rad2 = $par.find('[value="option2"]');
    var allNo = $rad2.filter(':checked').length == $rad2.length;
    $par.next('.group').find(':radio').prop('disabled', !allNo);
    if(!allNo){
      $par.nextAll('.group').find(':radio').prop({'disabled':true, 'checked':false});
    }
  } 
  $('.group :radio').change(testChecked);
});

每个.group也适用于2个以上的无线电组

您的错误：

"disable", "true"应为"disabled", "true"
<label>只能控制一个内部元素（所以我删除了它。）
<div> afaik不应该有name属性（所以我分配了一个ID）

相关文章：