Mark/deselect all dynamically created checkboxes

Question

I’m creating checkboxes from the comic book. I have another one that defines whether all the other checkboxes are checked or not. When I run the first time it works well, but the second time it doesn’t.

HTML

<div class="row smart-form">
  <section class="col col-3">
   <div class="checkbox">
     <label>
      <input type="checkbox" name="selectAll" id="check0" class="checkbox style-0 checkDoc">
      <span>Marcar/Desmarcar todos</span>
     </label>
   </div>
  </section>
 </div>
<div class="row smart-form">
 @for(dt <- docTipo) {
  <section class="col col-3">
    <div class="checkbox">
     <label>
      <input type="checkbox" name="docTipo" id="[email protected]" class="checkbox style-0">
      <span>@dt.descricao</span>
     </label>
    </div>
  </section>
 }
</div>

JQUERY

$(document).on('change','.checkDoc', function() {
            if(this.checked) {
                $("input[name=docTipo]").attr("checked", true);
                $("input[name=docTipo]").attr("disabled", true);
            } else {
                $("input[name=docTipo]").attr("checked", false);
                $("input[name=docTipo]").attr("disabled", false);
            }
        });

At the first click on the checkbox, all the others are selected and disabled, at the second click everything is downgraded and enabled, at the third click they are disabled but not marked. I have already inspected element, and it is added the checked in each one but in the browser does not appear the visa :s

Inspect Elemento

Any suggestions?

Answer 1

Use the on click and prop instead of attr

$(document).on( "click",'input[type=checkbox][name=selectAll]', function() {
    var isChecked = $(this).is(':checked');
    $('input[type=checkbox][name=docTipo]').prop('checked',isChecked);
});

Answer 2

You must use the .prop() and not the .attr(). In the documentation of .attr() is the explanation:

To Retrieve and change DOM properties such as the checked, Selected, or disabled state of form Elements, use the .prop() method.

In Portuguese:

For DOM properties such as checked, Selected, or state disabled form elements or checkboxes use .prop()

However, all these lines within the Event Handler could be reduced to:

$(document).on('change', '.checkDoc', function () {
    $("input[name=docTipo]").prop({
        checked: this.checked,
        disabled: this.checked
    });
});

jsFiddle: https://jsfiddle.net/7mqx59f0/