lundi 27 août 2018

md checkbox change dynamically issue

I have a md-checkbox inside a table cell, this checkbox is used to do a filter.

My issue in here is that when I clear the filters I can't fully clean my checkbox, I can change the value to false and remove the check from the box, however it won't work properly because the next click that user made will move the checkbox again to the false value instead moving it to the true state.

This is my code:

if (document.querySelectorAll(tableID + ' .findInput').length > 0) {
  var $clearButton = $('<button type="button" id="clearButton" class="btn btn-sm btn-default no-margin-bottom">')
      .text(translates.clear)
      .click(function () {
        var inputs = $(tableID + '_wrapper .findInput');
        for (var i = 0; i < inputs.length; i++) {
          $(inputs[i]).val('');
          var event;
          if (inputs[i].tagName === 'MD-SELECT') {
            event = document.createEvent('Event');
            event.initEvent('change', false, true);
            inputs[i].dispatchEvent(event);
          } else if (inputs[i].tagName === 'MD-CHECKBOX') { // issue in here

            event = document.createEvent('Event');
            event.initEvent('change', false, true);
            inputs[i].dispatchEvent(event);
            $(inputs[i])[0].children[0].firstChild.childNodes[0].checked = false;
            inputs[i].className = 'findInput findInputContainer mat-checkbox mat-accent mat-checkbox-anim-checked-unchecked';

          } else {
            event = document.createEvent('Event');
            event.initEvent('input', false, true);
            inputs[i].dispatchEvent(event);

            event = document.createEvent('Event');
            event.initEvent('change', false, true);
            inputs[i].dispatchEvent(event);
          }
        }
        table.columns().every(function () {
          this.search('');
        });
        $searchButton.click();
      });
  $(tableID + ' thead tr:eq(1) th:last-child').append($clearButton); 
}

At the moment I'm changing the value to false and the removing the check class from the md-checkbox so it will look like it's unchecked, however there is still something that I might need to change.




Aucun commentaire:

Enregistrer un commentaire