IE 11-如何防止复选框被单击后被选中？

Question

This is my HTML:

<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>R1 C1</td>
        <td>R1 C2</td>
        <td><input class="CB" type="checkbox" /></td>
    </tr>
    <tr>
        <td>R2 C1</td>
        <td>R2 C2</td>
        <td><input class="CB" type="checkbox" /></td>
    </tr>
    <tr>
        <td>R3 C1</td>
        <td>R3 C2</td>
        <td><input class="CB" type="checkbox" /></td>
    </tr>
    <tr>
        <td>R4 C1</td>
        <td>R4 C2</td>
        <td><input class="CB" type="checkbox" /></td>
    </tr>
    <tr>
        <td>R5 C1</td>
        <td>R5 C2</td>
        <td><input class="CB" type="checkbox" /></td>
    </tr>
</table>

This is JavaScript:

      $(".CB").change(function (e)
    {
        if ($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
    }
    );

JSFiddle

This is related to IE 11 .

As you can see when you click on unchecked checkbox it becomes checked and then confirmation dialog appears. If you don't answer "OK" checkbox reverts back to being unchecked.

It works as expected in Chrome but not in IE11 (FWIW it doesn't work in FF 52 either)

How to modify this so that when you click unchecked checkbox it stays unchecked until OK is pressed on confirmation dialog?

Also: is it acceptable to use class name "CB" even though it is not actually defined anywhere? It works as far as I can tell but it may be a bad practice for reasons I am not aware of.

Answer 1

There seems to be an issue with the event not being able to be cancelled or overruled in IE11, for this reason I have explicitly set checked to false each time and setting it according to it's previous state and the confirm response value.

 $(".CB").on('change', function(e) { const checked = this.checked // save the previous state this.checked = false // uncheck the box every time this.checked = checked && confirm('Are you sure?') // set the new state }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="CB" type="checkbox" />