title: Html input radio with multiple array name attribute validation failed
body: <p>I have below    radio buttons</p>
  
  <pre><code>&lt;div class="col-md-12 clearfix multi-wrap"&gt;
    &lt;div class="radio-inline"&gt;&lt;label for=""&gt;Academics&lt;/label&gt;&lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;1
        &lt;input type="radio" name="criteria_order[academics][]" value="1" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;2
        &lt;input type="radio" name="criteria_order[academics][]" value="2" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;3
        &lt;input type="radio" name="criteria_order[academics][]" value="3" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;4
        &lt;input type="radio" name="criteria_order[academics][]" value="4" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;5
        &lt;input type="radio" name="criteria_order[academics][]" value="5" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;6
        &lt;input type="radio" name="criteria_order[academics][]" value="6" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="radio-inline"&gt;
      &lt;label class="radio-label" style="background: rgb(221, 221, 221);"&gt;7
        &lt;input type="radio" name="criteria_order[academics][]" value="7" required="" aria-required="true" class="text-danger"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On click I am enabling checked attribute to true via JQuery like below</p>
  
  <pre><code>$('.radio-label').click(function(){
  
      $(this).closest('.multi-wrap').find('.radio-label').removeClass('active');
  
      $(this).closest('.multi-wrap').find('.radio-label input[type="radio"]').attr('checked',false);
  
      $(this).addClass('active');
  
      $(this).find('input[type="radio"]').attr('checked',true);
    });
  </code></pre>
  
  <p>The HTML after JQuery is like below:</p>
  
  <pre><code> &lt;input type="radio" name="criteria_order[academics][]" value="2" required="" aria-required="true" class="text-danger" checked="checked" aria-invalid="true"&gt;
  </code></pre>
  
  <p>JQuery validate is not validating. it is still showing the field is required.</p>
  
  <p><strong>Note:</strong> I noticed the attribute checked is appearing but when i view it it is not actually visible on page.</p>