ダイアログボックスのキャンセルを確認した後に入力チェック属性が機能しない

Question

チェックボックスをオフにすると、ユーザーが意図したものであることを確認する必要があります。

私はon.changeイベントを聞いて、ダイアログにconfirm()を使用しています。ユーザーが「キャンセル」をクリックすると、チェックボックスをリセットするコードがあります。しかし、それはそれに従わない。 'checked = "checked"属性は期待通りに配置されますが、チェックされているようには表示されません。

は、ここでそれを説明するJSFiddleだ：以下https://jsfiddle.net/0tvzLbgk/9/

がコードです。

$('#box').on('change', 'input', function() { 
 
    var $me = $(this); 
 

 
    if (this.checked) { 
 
    // Item has been checked, do nothing 
 
    } 
 
    else { 
 
    // Item has been unchecked 
 

 
    // Make sure it was not an accident 
 
    var confirmReset = confirm("Reset checkbox?"); 
 

 
    if (confirmReset == true) { 
 
     // Okay, reset 
 
    } 
 
    else { 
 
     // Mistake, mark as checked again 
 
     $me.attr('checked', 'checked'); 
 
    } 
 
    } 
 
});

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

それはchecked属性を以下のいない、なぜ誰でも知っていますか？

Answer 1

使用は（真の '確認'）

$のme.propを.ATTRない.prop。

Answer 2

使用しますが、ここでの特性ではない属性を変更する必要があるためattr()のprop() INSEAD：

$me.prop('checked', 'checked'); 

は、この情報がお役に立てば幸いです。

（.prop() vs .attr()に見てください）

$('#box').on('change', 'input', function() { 
 
    var $me = $(this); 
 

 
    if (this.checked) { 
 
    // Item has been checked, do nothing 
 
    } 
 
    else { 
 
    // Item has been unchecked 
 

 
    // Make sure it was not an accident 
 
    var confirmReset = confirm("Reset checkbox?"); 
 

 
    if (confirmReset == true) { 
 
     // Okay, reset 
 
    } 
 
    else { 
 
     // Mistake, mark as checked again 
 
     $me.prop('checked', 'checked'); 
 
     $me.addClass('shift-input'); 
 
    } 
 
    } 
 
});

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