用于动态字段的jQuery或JavaScript来更改属性

Question

我想在这个问题前加上我不熟悉jQuery或JavaScript的事实。我在学校和之后都在努力学习。我正在寻找一些帮助，从html输出中获取使用的内容。

我正在使用ASP.NET MVC Core，它正在生成如下输出：

<div class="col-md-1">
     <input name="CraftListA[0].CraftLevelSet" id="CraftListA_0__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">
</div>

MVC视图是这样写的：

//Prior divs and container information for the page

@for (var i = 0; i < Model.CraftListA.Count; i++)
{

 //Identification fields
      <div class="col-md-1">
           <input type="checkbox" asp-for="@Model.CraftListA[i].CraftLevelSet" />                                
      </div>
      //More Loop Code
}

视图正在使用的模型是这样的：

 [ComplexType]
    public class CharacterCraftCraftListViewModel
    {
        //Ids for the class
        public bool CraftLevelSet { get; set; }
        public string CraftLevelName { get; set; }
        //More class info
    }

我要做的是使用jQuery或JavaScript自动禁用复选框。因此，如果取消选中CraftListA [0] .CraftLevelSet，我想在列表末尾禁用CraftListA [1] .CraftLevelSet的复选框。我知道我会使用.prop（'disabled'）或.prop（'enabled'）来切换复选框。我相信我也会使用.prop（'checked'）进行验证。我正在思考：

$(function () {
   $("#chkBoxDisabled").change(){
       (this).prop('disabled');
   });
});
$(function () {
   $("#chkBoxEnabled").change(){
       (this).prop('enabled');
   });
});
$(function () {
   if $("name^=['CraftListA[0]__CraftLevelSet']").("#chkBoxEnabled")
   else if $("name^=['CraftListA{0}__CraftLevelSet']" - 1).prop('checked') == 'Checked'
      (this).("#chkBoxEnabled")
   else (this).("#chkBoxDisabled");
});

显然，虽然这不起作用。我知道它出错了，那就是抓取html名称或id。虽然我也不确定其余的代码。通过查看大约100个网站，我能够获得上述代码。我也是自己工作，没有人反复思考，所以这就是我转向这里的原因。任何人都可以给予任何帮助，甚至是转向的方向都会有所帮助。我之前通过JSFiddle运行了上述操作，正如我预期的那样，它也没有在那里工作。

更新 经过多次游戏后，我找到了一个有效的解决方案。但我很难理解如何将它与另一个复选框类一起使用。如果未选中第1类，则不应检查第1类中的所有内容，并且不应检查第2类。如果选中它，则会打开该类中的下一个复选框，以及第2类中的第一个可用复选框。

这是我的目标，每个班级都有效。我如何让他们一起工作？

//The below code works, but it might be limiting for the scope.
var fieldsA = $(".cALScb");
fieldsA.change(function () {
    Array.prototype.reduce.call(fieldsA, function (prev, curr) {
        curr.disabled = !prev.checked || prev.disabled;
				
        //This didn't work
        //var $child = $(this).closest("td").find(".cALMcb").eq(1);

        //If you want to uncheck remaining use this instead of above line:
        curr.checked = prev.checked ? curr.checked : false;
        curr.disabled = !prev.checked;

        return curr;
        //$child.prop('disabled', !this.checked);
    });
});

fieldsA.change();

//The below code works, but it might be limiting for the scope.
var fieldsAM = $(".cALMcb");
fieldsAM.change(function () {
    Array.prototype.reduce.call(fieldsAM, function (prev, curr) {
        curr.disabled = !prev.checked || prev.disabled;


        //If you want to uncheck remaining use this instead of above line:
        curr.checked = prev.checked ? curr.checked : false;
        curr.disabled = !prev.checked;

        return curr;
    });
});

fieldsAM.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group">
      <div class="col-md-1">
          <input name="CraftListA[0].CraftLevelSet" class="cALScb" id="CraftListA_0__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <b>Apprentice</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[0].CraftLevelMastery" class="cALMcb" id="CraftListA_0__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <input name="CraftListA[1].CraftLevelSet" class="cALScb" id="CraftListA_1__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">          
        </div>
        <div class="col-md-1">
          <b>Journeyman</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[1].CraftLevelMastery" class="cALMcb" id="CraftListA_1__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <input name="CraftListA[2].CraftLevelSet" class="cALScb" id="CraftListA_2__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">          
        </div>
        <div class="col-md-1">
          <b>Expert</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[2].CraftLevelMastery" class="cALMcb" id="CraftListA_2__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <br>
        <div class="col-md-1">
          <input name="CraftListA[3].CraftLevelSet" class="cALScb" id="CraftListA_3__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <b>Artisan</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[3].CraftLevelMastery" class="cALMcb" id="CraftListA_3__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <input name="CraftListA[4].CraftLevelSet" class="cALScb" id="CraftListA_4__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <b>Master</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[4].CraftLevelMastery" class="cALMcb" id="CraftListA_4__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <input name="CraftListA[5].CraftLevelSet" class="cALScb" id="CraftListA_5__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">                  
        </div>
        <div class="col-md-1">
          <b>Supreme</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[5].CraftLevelMastery" class="cALMcb" id="CraftListA_5__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <br>
        <div class="col-md-1">
          <input name="CraftListA[6].CraftLevelSet" class="cALScb" id="CraftListA_6__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">           
        </div>
        <div class="col-md-1">
          <b>Westfold</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[6].CraftLevelMastery" class="cALMcb" id="CraftListA_6__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <input name="CraftListA[7].CraftLevelSet" class="cALScb" id="CraftListA_7__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">  
        </div>
        <div class="col-md-1">
          <b>Eastenmnet</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[7].CraftLevelMastery" class="cALMcb" id="CraftListA_7__CraftLevelMastery" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <div class="col-md-1">
          <input name="CraftListA[8].CraftLevelSet" class="cALScb" id="CraftListA_8__CraftLevelSet" type="checkbox" checked="checked" value="true" data-val-required="The CraftLevelSet field is required." data-val="true">                 
        </div>
        <div class="col-md-1">
          <b>Westemnet</b>
        </div>
        <div class="col-md-1">
          <input name="CraftListA[8].CraftLevelMastery" class="cALMcb" id="CraftListA_8__CraftLevelMastery" type="checkbox" value="true" data-val-required="The CraftLevelMastery field is required." data-val="true">
        </div>
        <br>
    </div>

如果我们查看我的javascript，我们可以看到我尝试使用以下两行，但实际上它们没有做任何事情。

var $child = $(this).closest("td").find(".cALMcb").eq(1);
$child.prop('disabled', !this.checked);

很可能我的格式错了，或者我错了。任何帮助都会很好。