How to limit the amount of checked boxes-CodePudding

I'm creating a script to limit the amount of checkboxes that are checked but my script is disabling all checkboxes on the page.

How can I disable only one checkbox inside the div, in the example I did this is disabling all the checkboxes where I want to disable only the checkbox of the first div.

I want the script to run only for the first div

Here's an example of the code:

(function() {
  "use strict";

  var marcados = 0; //cheked
  var limitChoices = 2; // limit
  var verifyCheckeds = function($checks) {
    if (marcados >= limitChoices && limitChoices != 0) {
      loop($checks, function($element) {
        $element.disabled = $element.checked ? '' : 'disabled';
      });
    } else {
      loop($checks, function($element) {
        $element.disabled = '';
      });
    }
  };
  var loop = function($elements, cb) {
    var max = $elements.length;
    while (max--) {
      cb($elements[max]);
    }
  }
  var count = function($element) {
    return $element.checked ? marcados   1 : marcados - 1;
  }
  window.onload = function() {
    const elementodiv = document.getElementById("1question-80-1");
    var $checks = document.querySelectorAll('input[type="checkbox"]');
    loop($checks, function($element) {
      $element.onclick = function() {
        marcados = count(this);
        verifyCheckeds($checks);
      }
      if ($element.checked) marcados = marcados   1;
    });
    verifyCheckeds($checks);
  }
}());

<div >
  <span>Div 1</span>
  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

</div>

<div >
  <span>Div 2</span>
  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

</div>

<div >
  <span>Div 3</span>
  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

  <div>
    <input type="checkbox" /><span>Test</span>
  </div>

</div>

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Limit cheked checkbox</title>
  <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div >
      <span>Div 1</span>
      <div>
        <input type="checkbox"  /><span>Test</span>
      </div>

      <div>
        <input type="checkbox"  /><span>Test</span>
      </div>

      <div>
        <input type="checkbox"  /><span>Test</span>
      </div>

  </div>

  <div >
    <span>Div 2</span>
    <div>
      <input type="checkbox"  /><span>Test</span>
    </div>

    <div>
      <input type="checkbox"  /><span>Test</span>
    </div>

    <div>
      <input type="checkbox"  /><span>Test</span>
    </div>

</div>

<div >
  <span>Div 3</span>
  <div>
    <input type="checkbox"  /><span>Test</span>
  </div>

  <div>
    <input type="checkbox"  /><span>Test</span>
  </div>

  <div>
    <input type="checkbox"  /><span>Test</span>
  </div>

</div>

  <script type="text/javascript">
    (function () {
      "use strict";

      
      window.onload = function () {
        const elementodiv = document.getElementById("1question-80-1");
        var divs = document.getElementsByClassName("div");
        Array.from(divs).forEach(x => {
            var marcados = 0; //cheked
      var limitChoices = 2; // limit
      var verifyCheckeds = function ($checks) {
        if (marcados >= limitChoices && limitChoices != 0) {
          loop($checks, function ($element) {
            $element.disabled = $element.checked ? '' : 'disabled';
          });
        } else {
          loop($checks, function ($element) {
            $element.disabled = '';
          });
        }
      };
      var loop = function ($elements, cb) {
        var max = $elements.length;
        while (max--) {
          cb($elements[max]);
        }
      }
      var count = function ($element) {
        return $element.checked ? marcados   1 : marcados - 1;
      }
   
            var $checks = x.querySelectorAll('input[type="checkbox"]');
        loop($checks, function ($element) {
          $element.onclick = function () {
            marcados = count(this);
            verifyCheckeds($checks);
          }
          if ($element.checked) marcados = marcados   1;
        });
        verifyCheckeds($checks);
        });
        }
     
    }());
  </script>
</body>
</html>

Well you did it almost perfect. Just need some tweaks.

First, I reassigned the class names div1, div2, and div3 to just div. As I wanted my JS to be applied to all of them similarly.

Next, I've put all the global functions inside the forEach iterator function. I tried it and it got the job done.

Have a look at the solution and remember to upvote the answer if it solves the question.

CodePudding user response：

onclick will accept argument so you could access event.target and there you can dig trough parent nodes to limit elements that you manipulate. That put a lot of pressure on maintaining that html structure but should scale to any amount of containers and elements inside

   $element.onclick = function (event) {
            marcados = count(this);
            verifyCheckeds(
            $(event.target.parentNode.parentNode).find('input')

); }