IE 11 - 如何防止點擊後複選框被選中？

Question

這是我的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> 

這是JavaScript的：

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

JSFiddle

這涉及到IE 11。

正如你可以看到當你點擊未選中的複選框時，它會被選中，然後出現確認對話框。如果你沒有回答「確定」複選框恢復爲未選中狀態。

它將按預期在Chrome，但不是在IE11（FWIW它不工作在FF 52任）

如何，直到確定被壓在確認修改此，這樣當你點擊它選中保持未選中的複選框對話？

另外：使用類名稱「CB」是否可以接受，即使它沒有在任何地方實際定義？它的工作原理據我所知，但由於我不知道的原因，這可能是一種不好的做法。

Answer 1

似乎有一個事件不能被取消或在IE11中被推翻，因爲這個原因，我明確地設置了每次檢查爲false，並根據它的先前狀態和確認響應值進行設置。

$(".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" />