Count checked checkboxes with possibility to exclude specific ones in jQuery-CodePudding

I want to offer users to go through a checklist and see directly how much checkboxes are marked and which calculates directly the percentage. For this I found a solution but then realized that not all questions are relevant. For this I'd like to give the possibility to disable specific checkboxes which should be calculated and displayed automatically.

I tried several things out but didn't find the right way to combine the functionality.

Here you can see it in action https://jsfiddle.net/jonasfuchs/novqm71z/81/

$(document).ready(function() {

  var $checkboxes = $('#checklist td[] 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 >
      <form action="" method="post" id="checklist" accept-charset="UTF-8">
        <div>
          <table>
            <tr>
              <td >
                <div >
                  <input type="checkbox" id="rule-1" name="plain-language" data-disenable='rule-1' value="rule-1" />
                  <label >Rule 1</label>
                </div>
              </td>
              <td><input type="checkbox" name="relevant" data-target='rule-1' value="disable">
                <label for="disable" >not relevant</label>
              </td>
            </tr>
            <tr>
              <td >
                <div>
                  <input type="checkbox" id="rule-2" name="descriptive-link" data-disenable='rule-2' value="rule-2"  />
                  <label >Rule 2</label>
                </div>
              </td>
              <td>
                <input type="checkbox" name="relevant" data-target='rule-2' value="disable">
                <label for="disable" >not relevant</label>
              </td>
            </tr>
          </table>
        </div>

        <div >
          <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>

Any advices to solve the problem? Thanks in advance!

CodePudding user response：

Code works fine in case of checkbox1 But for not relevant checkboxes you got to include the onchange function separately Check the below solution.

Not sure what conformance values are to be displayed incase of not relevant boxes, anyways conformance box is untouched, but simple tweaks will help you in changing suitable logic, your main concern must have been resolved with the below code.

$(document).ready(function () {

var $checkboxes = $('#checklist td[] :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[] :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);


});

If you want to change conformance values based on disable boxes too add below code as the end line before end of second onchange block

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

Available for more queries.

CodePudding user response：

For better understanding I forked my jsfiddle and added some more relevant info to it: The idea behind this is to have an accessibility checklist, e.g. for a designer who wants to check the WCAG conformance. In not all cases a webpage will have an icon for example or a video.

In these cases the rules to check these are not relevant for the overall conformance:

jsfiddle.net/jonasfuchs/3fnoa2c8/18

I set the last checkbox to disabled manually and it works like it should:

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

This I would like to achieve by checking "not relevant" checkbox