英文:
Why is the checkbox not updating visually after using jQuery to uncheck it when clicking 'No' on a modal box?
问题
当我点击模态框的"是"按钮时，我试图在jQuery中取消选中输入复选框，并在点击"否"按钮时选中它。
我可以在开发者工具中看到，当点击"是"时，已添加"checked"属性（checked = "checked"），当点击"否"时，已隐藏，但在用户界面中，选中标记没有更新。
我尝试过以下代码在"是"按钮中：
$(this).prop("checked", true);
以及：
$(this).attr("checked", true);
但都没有成功。
英文:
I am trying to uncheck input checkbox in jquery when i click No button of modal box and check it I click Yes button .
$('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
if ($(this).is(':checked')) {
var $n = noty({
text: 'Please provide relevant complementary information about .....',
modal: true,
layout: 'center',
type: 'neutral',
buttons: [{
addClass: 'btn btn-default',
text: 'Ok',
onClick: function($noty) {
$(this).prop("checked","checked");
$noty.close();
}
},
{
addClass: 'btn btn-default',
text: 'No',
onClick: function ($noty) {
$(this).removeAttr('checked');
$noty.close();
}
}]
});
// Focus on "OK" button
$n.$buttons.find('#button-0').first().focus();
return false;
}
});
I can see in developer tool the checked is added(checked = "checked") when clicking yes and hidden when clicking no, but in the UI the checking mark is not updating.
I tried $(this).prop("checked","checked");
and $(this).prop("checked",true);
and also $(this).attr("checked",true);
in Yes button, but without success .
答案1
得分: 0
这段代码适用于您的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Checkbox and Modal Box</title>
</head>
<body>
<div class="container">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="techOptions" value="8" id="techCheckbox">
<label class="form-check-label" for="techCheckbox">
Tech Option
</label>
</div>
<!-- Modal Box -->
<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>请提供有关.....的相关补充信息。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="modal-ok">是</button>
<button type="button" class="btn btn-secondary" id="modal-no">否</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
if ($(this).is(':checked')) {
var $checkbox = $(this); // 将复选框元素存储在一个变量中
$('#myModal').modal('show'); // 显示模态框
// 处理“是”按钮点击
$('#modal-ok').on('click', function() {
$checkbox.prop("checked", true); // 勾选复选框
$('#myModal').modal('hide'); // 隐藏模态框
});
// 处理“否”按钮点击
$('#modal-no').on('click', function() {
$checkbox.prop("checked", false); // 取消勾选复选框
$('#myModal').modal('hide'); // 隐藏模态框
});
}
});
});
</script>
</body>
</html>
希望这对您有所帮助。
英文:
This code work for your case
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Checkbox and Modal Box</title>
</head>
<body>
<div class="container">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="techOptions" value="8" id="techCheckbox">
<label class="form-check-label" for="techCheckbox">
Tech Option
</label>
</div>
<!-- Modal Box -->
<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>Please provide relevant complementary information about .....</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="modal-ok">Yes</button>
<button type="button" class="btn btn-secondary" id="modal-no">No</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
if ($(this).is(':checked')) {
var $checkbox = $(this); // Store the checkbox element in a variable
$('#myModal').modal('show'); // Show the modal box
// Handle "Yes" button click
$('#modal-ok').on('click', function() {
$checkbox.prop("checked", true); // Check the checkbox
$('#myModal').modal('hide'); // Hide the modal box
});
// Handle "No" button click
$('#modal-no').on('click', function() {
$checkbox.prop("checked", false); // Uncheck the checkbox
$('#myModal').modal('hide'); // Hide the modal box
});
}
});
});
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论