我已经尝试了所有可能的方法，但我仍然没有得到它的工作。我有一个带有 checkbox 的模式窗口，我希望当模式打开时，checkbox 选中或取消选中应基于数据库值。 （我已经与其他表单字段一起使用了。）我开始尝试对其进行检查，但没有成功。
我的 HTML div：
<div id="fModal" class="modal" >
...
<div class="row-form">
<div class="span12">
<span class="top title">Estado</span>
<input type="checkbox" id="estado_cat" class="ibtn">
</div>
</div>
</div>
和 jQuery：
$("#estado_cat").prop( "checked", true );
我也尝试使用 attr，以及在论坛中看到的其他人，但似乎都没有工作。
有人能指出我正确的方法吗？
编辑
好的，我真的在这里错过了一些东西。如果复选框在页面中，我可以使用代码选中/取消选中，但它是否在模式窗口中，我不能。我尝试了几十种不同的方法。
我有一个应该打开模式的链接：
<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>
和 jQuery 来“监听”点击并执行一些操作，比如用来自数据库的数据填充一些文本框。一切都像我想要的那样工作，但问题是我无法使用代码设置复选框选中/取消选中。请帮忙！
$(function () {
$(".editButton").click(function () {
var id = $(this).data('id');
$.ajax({
type: "POST",
url: "process.php",
dataType: "json",
data: {
id: id,
op: "edit"
},
}).done(function (data) {
// The next two lines work fine,
// i.e. it grabs the value from database and fills the textboxes
$("#nome_categoria").val(data['nome_categoria']);
$("#descricao_categoria").val(data['descricao_categoria']);
// Then I tried to set the checkbox checked (because it's unchecked by default)
// and it does not work
$("#estado_cat").prop("checked", true);
$('#fModal').modal('show');
});
evt.preventDefault();
return false;
});
});
你必须使用“道具”功能：
.prop('checked', true);
在 jQuery 1.6 之前（参见 user2063626's answer）：
.attr('checked','checked')
采用所有建议的答案并将它们应用于我的情况 - 尝试根据检索到的值为 true（应该选中该框）或 false（不应该选中该框）来选中或取消选中复选框 - 我尝试了以上所有方法并且发现使用 .prop("checked", true) 和 .prop("checked", false) 是正确的解决方案。
我还不能添加评论或回答，但我觉得这很重要，可以添加到对话中。
这是完整日历修改的简写代码，如果检索到的值“allDay”为真，则选中 ID 为“even_allday_yn”的复选框：
if (allDay)
{
$( "#even_allday_yn").prop('checked', true);
}
else
{
$( "#even_allday_yn").prop('checked', false);
}
$( "#even_allday_yn").prop('checked', allDay);
$('#even_allday_yn').prop('checked', allDay === true) 会起作用，因为 allDay === true 会给出布尔结果。
试试下面的代码：
$("div.row-form input[type='checkbox']").attr('checked','checked')
或者
$("div.row-form #estado_cat").attr("checked","checked");
或者
$("div.row-form #estado_cat").attr("checked",true);
.prop('checked', true) 而不是 attr - 我刚刚遇到了同样的问题，并且 prop 有效。
:checked 伪选择器或其他原生复选框 HTML 功能，则必须使用 .prop。
.attr() 是用于早期版本的方法，.prop() 用于 jQuery 1.6+。
“checked”属性一旦存在就“勾选”复选框。因此，要选中/取消选中复选框，您必须设置/取消设置属性。
检查框：
$('#myCheckbox').attr('checked', 'checked');
取消选中该框：
$('#myCheckbox').removeAttr('checked');
用于测试检查状态：
if ($('#myCheckbox').is(':checked'))
希望能帮助到你...
由于您处于模态窗口（无论是动态窗口还是页面中），您可以使用以下代码来实现您的目标：（我在我的网站上遇到了同样的问题，这就是我修复它的方法）
HTML：
<div class="content-container" style="text-align: right;">
<input type="checkbox" id="QueryGroupCopyQueries">
<label for="QueryGroupCopyQueries">Create Copies</label>
</div>
代码：
$.each(queriesToAddToGroup, function (index, query) {
if (query.groupAddType === queriesGroupAddType.COPY) {
// USE FIND against your dynamic window and PROP to set the value
// if you are using JQUERY 1.6 or higher.
$(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);
return;
}
在上面的“kendoWindow”是我的窗口（我的窗口是动态的，但是当直接在页面中附加到元素时我也会这样做）。我正在遍历一组数据（“queriesToAddToGroup”）以查看是否有任何行具有 COPY 属性。如果是这样，我想在用户从该窗口保存时打开设置该属性的窗口中的复选框。
prop 作为这个答案表明是完成动态 jQuery 复选框检查/取消检查的正确方法。
我知道这需要一个 Jquery 解决方案，但我只是想指出，在纯 javascript 中切换它很容易。
var element = document.getElementById("estado_cat");
element.checked = true;
它适用于所有当前和未来的版本。
.attr("checked",true)
.attr("checked",false)
将工作。确保真假不在引号内。
.prop('checked', true); More info in this Post
.attr() 确实有效，如上所述。
如果您想将此功能用于 GreaseMonkey 脚本以自动检查页面上的复选框，请记住，仅设置选中的属性可能不会触发相关操作。在这种情况下，“单击”复选框可能会（并设置选中的属性）。
$("#id").click()
您可以像下面给定的代码那样编写。
HTML
<input type="checkbox" id="estado_cat" class="ibtn">
jQuery
$(document).ready(function(){
$(".ibtn").click(function(){
$(".ibtn").attr("checked", "checked");
});
});
希望它对你有用。
<body>
<input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>
<script>
$('#IsActive').change(function () {
var chk = $("#IsActive")
var IsChecked = chk[0].checked
if (IsChecked) {
chk.attr('checked', 'checked')
}
else {
chk.removeAttr('checked')
}
chk.attr('value', IsChecked)
});
</script>
为我工作：
$checkbok.prop({checked: true});
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;
Find 会返回数组，所以即使只有一项，也要使用 [0] 来获取
如果你不使用 find 那么
$("#subclip_checkbox").checked=true;
这对我来说在 Mozilla Firefox 中运行良好
试试这个，因为你可能正在使用 jQuery UI（如果没有请评论）
$("#fModal" ).dialog({
open: function( event, ui ) {
if(//some hidden value check which stores the DB value==expected value for
checking the Checkbox)
$("div.row-form input[type='checkbox']").attr('checked','checked');
}
});
您是否尝试在复选框上运行 $("#estado_cat").checkboxradio("refresh")？
这行得通。
$("div.row-form input[type='checkbox']").attr('checked','checked');
我也遇到了这个问题。
这是我的旧代码不起作用
if(data.access == 'private'){
Jbookaccess.removeProp("checked") ;
//I also have tried : Jbookaccess.removeAttr("checked") ;
}else{
Jbookaccess.prop("checked", true)
}
这是我现在可以使用的新代码：
if(data.access == 'private'){
Jbookaccess.prop("checked",false) ;
}else{
Jbookaccess.prop("checked", true)
}
所以，关键是在它起作用之前，确保选中的属性确实存在并且没有被删除。
Jbookaccess.prop("checked", data.access != 'private');
这是因为您使用最新版本的 jquery attr('checked') 返回 'checked' 而 prop('checked') 返回 true。
加载模态窗口后设置复选框。我认为您在加载页面之前设置了复选框。
$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
<label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
</div>
请记住分别增加 id 和 for 属性。对于动态添加的引导程序复选框。
$(document).on('change', '.custom-switch', function(){
let parent = $(this);
parent.find('.custom-control-label > span').remove();
let current_toggle = parent.find('.custom-control-input').attr('id');
if($('#'+current_toggle+'').prop("checked") == true){
parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
}
else if($('#'+current_toggle+'').prop("checked") == false){
parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
}
})
关注公众号
不定期副业成功案例分享
