IE does not run the “Edit” checkbox in the undefined checkbox when you click on it

Question

I have a tri-state flag, and I need the change event to fire when the user clicks on it, but IE does not fire it when the flag state is in the "INDETERMINATE" state (maybe a browser error?). <w> Since it works for IE, I can raise a change event programmatically, but it does not work for my case, because I need to know if the event was fired, because the user really clicked on it.

Scenario here / Test for IE and Chrome

<label for="cb">
  <input id="cb" type="checkbox" />
   click me
</label>

var checkbox = document.getElementById("cb");
checkbox.indeterminate = true;
$('#cb').change(function(){alert('Change Event')});

I read this article https://github.com/jquery/jquery/issues/1698 and How to deal with browser differences with an indefinite checkbox , but I could find a specific resolution for my case.

Any ideas how to fix this?

Thanks in advance.

Answer 1

Flag entries can have only two states: marked or unchecked. An undefined state is only visual, and it masks the real state of the flag.

, true, false, . "" "" "" onchange.

, , , IE. IE :

document.getElementById("cb1").indeterminate = true;
document.getElementById("cb2").indeterminate = true;

<label for="cb1"><input id="cb1" type="checkbox" checked="checked" />I'm actually checked</label>
<label for="cb2"><input id="cb2" type="checkbox" />I'm actually unchecked</label>

IE . Chrome .

IE , . "" , "" " ", , onchange.

? , IE, , https://github.com/jquery/jquery/issues/1698.

// As other browsers already fire the change event,
// only bind the listener for IE.
if ( window.navigator.userAgent.indexOf('Trident') >= 0 ) {
    $(function(){
        // Pointer events in IE10, IE11 can be handled as mousedown.
        $(document).on('mousedown', 'input', function(){
            // Only fire the change event if the input is indeterminate.
            if ( this.indeterminate ) {
                $(this).trigger('change');
            }
        });
    });
}

A. Wolff, , , , , :

var checkbox = document.getElementById("cb");
checkbox.indeterminate = true;
$('#cb').one('click', function () {
    if (!this.checked) {
        this.checked = true;
        var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    this.dispatchEvent(evt);
    }
}).change(function (e) {
    console.log(e);
    alert(e.originalEvent)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cb">
    <input id="cb" type="checkbox" />click me
</label>