Question

当试图使子类禁用并取消选中父类是否未选中时，我的脚本有问题。目前，该页面没有任何变化。我还尝试使子类同时相互引用，如果未选中前一个，则希望取消选中和禁用后面的子类。如果已选中，则启用下一个，但从禁用到禁用下一个，直到进行下一步。最后，我试图让此脚本在页面完全加载后以及选中复选框时运行。这是通过插件处理嵌套表，但是表的每个部分都在外部表和内部表上都设置了类。任何人看到的对我有帮助的任何事情都将是感激的。我在处理JavaScript时不知所措。

我当前正在加载测试数据的页面，目前已引入验证错误。尽管它不起作用，但我认为它应该如何工作。目前，我有三个功能正在协同工作以实现结果。我可以在调试过程中遍历代码，并通过所有三个功能，但是页面本身未显示任何更改。同时所有数据都从数据库中提取出来，并通过C＃以HTML格式输出。 site.js脚本确实包含了这三个功能以外的内容，我已禁用不需要的站点功能来进行测试。如果我不得不猜测我确实有错误的代码，但是我无法确定代码中哪里有错误。可以在JSFiddle中看到完成的全部工作：https://jsfiddle.net/MikeRM2/d5gopkw2/35/

以下是为此的前两个功能：

 function changefc(e) {
    e.checked = false;
    console.log(e);
    return e;
 }

function changefd(evt) {
   evt.disabled = true;
   console.log(evt);
   return evt;
}

以上内容在以下函数中调用，我正在将变量传递给它们以更改变量的状态。以下是浏览网页的代码：

 console.log("beforeBind");
 $(".cbFS").on('click', updateDisabledState);

 function updateDisabledState() {
   console.log("on update")

   //This is to set the grid to the correct settings on load.
   //Get the elements of the main grid.
   var qSelAll = [].slice.call(document.querySelector('.MainGrid').children);
   for (var a = 0; a < qSelAll.length; a++) {
    //Check the factions grid
       var gridFac = $('.factionGrid');
       for (var b = 0; b < gridFac.length; b++) {
       //Check if the Faction is set.  If it is set then allow the data to be processed.
       //If it is not set then set all the Reputations Levels to false and disable them.
           var gridFS = [].slice.call(gridFac[b].querySelectorAll('.cbFS'));
           var repGrid = [].slice.call(gridFac[b].querySelectorAll('.repLevelGrid .cbRS'));
           for (var c = 0; c < gridFS.length; c++) {
               console.log(c);
               console.log(gridFS[c]);
               var fieldFS = gridFS[c].checked;
               if (fieldFS === false) {
                  for (var d = 0; d < repGrid.lengrh; d++) {
                  console.log(d);
                  console.log(repGrid[d]);
                  var fieldRSc = repGrid[d].checked;
                  var fieldRSd = repGrid[d].disabled;
                  changefc(fieldRSc);
                  changefd(fieldRSd);
                  console.log(fieldRSc);
                  console.log(fieldRSd);
                  }
               } else {
                  continue;
               }
        }
     }
   }
 }

我从这里得到的内容没有在页面上发生。当我取消选中名称后面的外部复选框时，表中的内部复选框不会更改状态。如果未选中外部，则该表“行”上的所有内部复选框均应取消选中并禁用。如果外部复选框在加载时或通过选择被选中，则内部复选框应相互检查以确定是否应对其进行检查。
从顶部的内部表可以看出，所有内容均应取消选中并禁用。并非如此，第一个复选框处于未选中状态，后三个复选框处于选中状态，后两个复选框处于未选中状态，但是它们仍处于启用状态。在底部的内部表中，选中了最后一个复选框，但未选中上一个复选框，因此应取消选中和禁用最后一个复选框。

Answer 1

最简单的方法是在选中主复选框时，将类添加到您希望默认选中的复选框。

下面的jquery将搜索父tr（表行）中的所有复选框，然后对其进行操作。您已经为主复选框添加了类.cbFS，所以我已将其用作它们的标识符，然后将现有的类.cbRS用于了相关的复选框。

我向关联的复选框添加了一个新类.default-checked，默认情况下应选中该复选框。

这是在自定义函数中完成的，因此可以在更改主复选框的值后运行，也可以在文档准备好后运行。

埃里克·菲利普斯（Erik Phillips）是正确的，每个元素的HTML id应该是唯一的，否则以后您会陷入麻烦。

让我知道这是否不是您所需要的。

// Run when document is ready
$(document).ready( function() {

  // Cycle through each of the master checkboxes
  $(".cbFS").each(function() {

    // Check if it is checked or not, and run the custom function
    if (this.checked) {
      checkCheckboxes($(this), "");
    } else {
      checkCheckboxes($(this), "disabled");
    }
  
  });

});


// Add event for any change of the checkboxes with class .cbFS, as above check if checked and then run custom function
$(".cbFS").change(function() {
  if (this.checked) {
    checkCheckboxes($(this), "");
  } else {
    checkCheckboxes($(this), "disabled");
  }
});


function checkCheckboxes(master, disabled) {

  // Check if the checkboxes should be disabled
  if (disabled != "disabled") {

    // Find closest row and then enable any checkboxes with class .cbRS 
    master.closest("tr").find(".cbRS").prop('disabled', disabled);
    // Again, find closest row and check any checkboxes with the class .default-checked
    master.closest("tr").find(".default-checked").prop('checked', true);

  } else {

    // Find closest row, find any checkbox with class .cbRS. Uncheck these checkboxes and disable them
    master.closest("tr").find(".cbRS").prop('checked', false).prop('disabled', disabled);

  }


}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body style="background-color:#C05046">
  <div class="form-group">
    <div class="col-md-12 Maingrid">
      <div class="mvc-grid" data-name="">
        <table>
          <tbody>
            <tr class="factionGrid">
              <td class="hidden">1</td>
              <td class="hidden">1</td>
              <td>Ale Association</td>
              <td class="col-md-1">
                <input name="FactionSet" class="cbFS" id="FactionSet" type="checkbox" data-val-required="The FactionSet field is required." data-val="true" value="true" />
              </td>
              <td>
                <div class="form-group RepLevelGrid">
                  <div class="col-md-6">
                    <div class="mvc-grid" data-name="">
                      <table>
                        <tbody>
                          <tr>
                            <td class="hidden">6</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS" id="ReputationIsChecked" type="checkbox" data-val-required="The ReputationIsChecked field is required." data-val="true" value="true" />
                            </td>
                            <td>Enemy</td>
                            <td class="hidden">0</td>
                          </tr>
                          <tr>
                            <td class="hidden">13</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Neutral</td>
                            <td class="hidden">1</td>
                          </tr>
                          <tr>
                            <td class="hidden">1</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Acquaintance</td>
                            <td class="hidden">2</td>
                          </tr>
                          <tr>
                            <td class="hidden">8</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Friend</td>
                            <td class="hidden">3</td>
                          </tr>
                          <tr>
                            <td class="hidden">2</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS" id="ReputationIsChecked" type="checkbox" value="true" />
                            </td>
                            <td>Ally</td>
                            <td class="hidden">4</td>
                          </tr>
                          <tr>
                            <td class="hidden">11</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS" id="ReputationIsChecked" type="checkbox" value="true" />
                            </td>
                            <td>Kindred</td>
                            <td class="hidden">5</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr class="factionGrid">
              <td class="hidden">1</td>
              <td class="hidden">2</td>
              <td>Men of Ened</td>
              <td class="col-md-1">
                <input name="FactionSet" class="cbFS" id="FactionSet" type="checkbox" checked="checked" value="true" />
              </td>
              <td>
                <div class="form-group RepLevelGrid">
                  <div class="col-md-6">
                    <div class="mvc-grid" data-name="">
                      <table>
                        <tbody>
                          <tr>
                            <td class="hidden">13</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Neutral</td>
                            <td class="hidden">1</td>
                          </tr>
                          <tr>
                            <td class="hidden">1</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Acquaintance</td>
                            <td class="hidden">2</td>
                          </tr>
                          <tr>
                            <td class="hidden">8</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Friend</td>
                            <td class="hidden">3</td>
                          </tr>
                          <tr>
                            <td class="hidden">2</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS" id="ReputationIsChecked" type="checkbox" value="true" />
                            </td>
                            <td>Ally</td>
                            <td class="hidden">4</td>
                          </tr>
                          <tr>
                            <td class="hidden">11</td>
                            <td>
                              <input name="ReputationIsChecked" class="cbRS default-checked" id="ReputationIsChecked" type="checkbox" checked="checked" value="true" />
                            </td>
                            <td>Kindred</td>
                            <td class="hidden">5</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

使用父类复选框时，如何让子类复选框更改状态？

1 个答案: