计数复选框，有可能排除jQuery中的特定复选框

Question

我想让用户通过一个检查表，直接查看标记了多少复选框，并直接计算百分比。为此，我找到了一个解决办法，但后来意识到并非所有的问题都是相关的。为此，我想提供禁用特定复选框的可能性，这些复选框应该是自动计算和显示的。

我尝试了几种方法，但是没有找到正确的方法来组合这些功能。

在这里，您可以看到它在行动https://jsfiddle.net/jonasfuchs/novqm71z/81/

​

$(document).ready(function() {

  var $checkboxes = $('#checklist td[class="list-checkbox"] input:checkbox').not(':disabled')

  $checkboxes.change(function() {
    var countCheckedCheckboxes = $checkboxes.filter(':checked').length,
      percentageCheckedCheckboxes = Math.round(countCheckedCheckboxes / $checkboxes.length * 100);

    $('#count-checked-checkboxes').text(countCheckedCheckboxes);
    $("#percentage-checked-checkboxes").text(percentageCheckedCheckboxes);
  });

  $("input").change(function() {
    var target = $(this).data('target');
    if (target) $("input[data-disenable='" + target + "']").prop("disabled", $(this).is(':checked'));
  });
  
    $("#count-total-checkboxes").text($checkboxes.length);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
      <form action="" method="post" id="checklist" accept-charset="UTF-8">
        <div>
          <table>
            <tr>
              <td class="list-checkbox">
                <div class="form-item form-type-checkbox">
                  <input type="checkbox" id="rule-1" name="plain-language" data-disenable='rule-1' value="rule-1" class="form-selection-control"/>
                  <label class="rule-description">Rule 1</label>
                </div>
              </td>
              <td><input type="checkbox" name="relevant" data-target='rule-1' value="disable">
                <label for="disable" class="label">not relevant</label>
              </td>
            </tr>
            <tr>
              <td class="list-checkbox">
                <div>
                  <input type="checkbox" id="rule-2" name="descriptive-link" data-disenable='rule-2' value="rule-2" class="form-selection-control" />
                  <label class="rule-description">Rule 2</label>
                </div>
              </td>
              <td>
                <input type="checkbox" name="relevant" data-target='rule-2' value="disable">
                <label for="disable" class="label">not relevant</label>
              </td>
            </tr>
          </table>
        </div>

        <div class="count-checkboxes-wrapper">
          <span id="count-checked-checkboxes">0</span> of
          <span id="count-total-checkboxes">0</span> checked |
          <span id="percentage-checked-checkboxes">0</span> % conformance |
          <span id="count-disabled-checkboxes">0</span> disabled
        </div>

      </form>
    </div>

  </body>

</html>

​

有什么解决问题的建议吗？提前感谢！

Answer 1

代码在checkbox1的情况下可以正常工作，但是对于不相关的复选框，您必须分别包含onchange函数，检查下面的解决方案。

不确定在不相关框的情况下将显示哪些一致性值，无论如何，一致性框是不被触及的，但是简单的调整将帮助您更改合适的逻辑，您的主要关注事项必须用下面的代码解决。

$(document).ready(function () {

var $checkboxes = $('#checklist td[class="list-checkbox"] :checkbox').not(':disabled')

$checkboxes.change(function () {
    var countCheckedCheckboxes = $checkboxes.filter(':checked').length,
    percentageCheckedCheckboxes = Math.round(countCheckedCheckboxes / $checkboxes.length * 100);

    $('#count-checked-checkboxes').text(countCheckedCheckboxes);
    $("#percentage-checked-checkboxes").text(percentageCheckedCheckboxes);
});

var $checkboxesNotRelevant = $('#checklist td[class="relevant-checkbox"] :checkbox ').not(':disabled')
$checkboxesNotRelevant.change(function () {
    var countCheckboxesNotRelevant = $checkboxesNotRelevant.filter(':checked').length,
    percentageCheckedCheckboxes = Math.round(countCheckboxesNotRelevant / $checkboxes.length * 100);

    $('#count-disabled-checkboxes').text(countCheckboxesNotRelevant);
});

$("input").change(function () {
    var target = $(this).data('target');
    if (target) $("input[data-disenable='" + target + "']").prop("disabled", $(this).is(':checked'));
});

$("#count-total-checkboxes").text($checkboxes.length);


});

如果您也希望基于禁用框更改一致性值，请将下面的代码添加为第二个onchange块结束前的结束行。

$("#percentage-checked-checkboxes").text(percentageCheckedCheckboxes);

可用于更多查询。

Answer 2

为了更好的理解，我分叉了我的小小提琴，并添加了一些更相关的信息:这背后的想法是有一个可访问性检查表，例如，一个设计师谁想检查WCAG的一致性。在所有情况下，一个网页将有一个图标，例如，或视频。

在这些情况下，检查这些规则与总体一致性无关：

jsfiddle.net/jonasfuchs/3fnoa2c8/18

我将最后一个复选框设置为手动禁用，它的工作方式如下：

<input type="checkbox" id="rule-4" name="plain-language" data-disenable='rule-4' value="rule-4" class="form-selection-control" disabled />

我想通过选中“不相关”复选框来实现这一点。