單擊模式對話框按鈕后，如何取消選中復選框？

Question

這是我的問題：

在這里提琴： https : //www.bootply.com/jMryRDRZNT

用戶單擊復選框時，我需要顯示一條警告消息。 然后顯示一個模式對話框，用戶可以單擊“我理解”和“取消”。單擊“取消”按鈕后，我要取消選中該復選框。

我嘗試這樣做：

$('#btnModalCancel').click(function() {
    $('chkImm').attr('checked', false);
});

嘗試也'prop'而不是attr-仍然無法正常工作。 似乎在顯示對話框之后，某些東西阻止了復選框的更改。 我將console.log（'test'）放在函數內-它被調用，但是復選框並未被選中...請參見上面鏈接中的小提琴。

Answer 1

1. 復選框的正確選擇器將是$('#chkImm')
2. 使用prop更改checked狀態。

---

$('#chkImm').prop('checked', false);

Answer 2

您的chkImm選擇器錯誤，請使用#chkImm

對於jQuery 1.6+：

.attr（）不推薦使用屬性； 使用新的.prop（）函數代替：

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

對於jQuery <1.6：

要檢查/取消選中復選框，使用屬性checked和改變這一點。 使用jQuery，您可以執行以下操作：

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

參考： https : //stackoverflow.com/a/17420580/1715121

 $('#chkImm').on('change', function() { if ($(this).is(':checked')) { $("#myModal").modal({ backdrop: 'static', eyboard: false }); } }); $('#btnModalCancel').click(function() { $('#chkImm').attr('checked', false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <form class="form"> <input id="chkImm" type="checkbox"><label>Turn on</label> </form> </div> <div id="myModal" class="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Предупреждение, вы уверены!</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Блаблабла</p> </div> <div class="modal-footer"> <button type="button" id="btnModalAgree" class="btn btn-warning">Я уверен, и хочу продолжить</button> <button type="button" id="btnModalCancel" class="btn btn-secondary" data-dismiss="modal">Отмена</button> </div> </div> </div> </div> 

Answer 3

更新了您的代碼： https : //www.bootply.com/GuRVklMhIa#

嘗試做：document.getElementById（“ chkImm”）。checked = false;

Answer 4

我用這個來顯示模態：

$('#myCheckbox').attr("checked", "checked"); 

但是如果您通過以下方式隱藏模式，則將無法使用：

$('#myCheckbox').prop('checked', false);

因此，為了正確顯示和隱藏，在顯示和隱藏期間，我和我都使用了PROP方法。

$('#myCheckbox').prop('checked', false); //To Hide
$('#myCheckbox').prop('checked', false); //To Show