jQuery Validation on checkboxes - parent and child checkboxes

Question

I want to write a jQuery Validation rule for check-boxes where a parent checkbox category must be selected and a child category for that parent has to be selected too (should the parent have a child checkbox). Otherwise the form will not submit.

The code below has 2 parent check-box categories and 3 child check-box categories for the first parent checkbox. If a user selects the first parent checkbox he/she must click on a child one. However if they click on the second parent checkbox which has no children the form can go through.

 <ul id = "checklist">
         <li id = "box">
          <label> <input id = "box_input" type = "checkbox"> "A CheckBox"</label>

         <ul id = "checklist_children">

            <li id = "box">
          <label> <input id = "box_input" type = "checkbox"> "A CheckBox"</label>
            </li>
            <li id = "box">
          <label> <input id = "box_input" type = "checkbox"> "A CheckBox"</label>
            </li>
            <li id = "box">
          <label> <input id = "box_input" type = "checkbox"> "A CheckBox"</label>
            </li>
         </ul>

         </li>

         <li id = "box">
          <label> <input id = "box_input" type = "checkbox"> "A CheckBox"</label>
         </li>

      </ul>

In regards to the validation so far what I wrote was a method that sees if any boxes are selected and if so no validation is needed. I want to modify this

...
 my_checkbox_rule: {
        required: function (element) {
        var boxes = $('#box_input'); 

        if (boxes.filter(':checked').length == 0) {
        return true;
        }
       },
       minlength: 1
      },
...

I want to modify the above code to allow that functionality. I can provide more information than needed.

Just as an extra note the child boxes have the same id as the parent boxes. This was intended.

Answer 1

As others have said the id selector is unique, meaning that when you do $('#box_input') you will only get the first object with id = 'box_input'. I suggest changing id = 'box_input' for class = 'box_input'. You can then add ids to the first parent and its children. Something like id = 'parent_box', and for children either id = 'children_1' and so on, or class = 'box_input children'. Afther that is done I would do something like if ($('#box_input').filter(':checked') && $('.children').filter(':checked')) { return true; }

Answer 2

As far as i know => the id attribute has to be unique in HTML, i know this does not solve your problem but it's a hint to (maybe) another problem you could get...

http://www.w3schools.com/tags/att_global_id.asp

Best M.

Answer 3

you can't use

var boxes = $('#box_input'); 

becouse id is unique and

console.log($('#box_input').length)

will always be 1, if element exists in the DOM.

... but you can use

var boxes = $('input[id=box_input]')

(jQuery 2.1.3 hosted on google)