我有一个用户列表，其中填充了查询中的Coldfusion cfloop。每个用户行都有一个可以单击的按钮，用于调用模态。在该模式中是可以打开和关闭的权限列表。我正在使用CSS3翻转开关复选框进行切换。这些值是从ajax调用填充的。
问题
当用户单击用户行按钮以调用模态并触发ajax调用时，一切正常。用户可以翻转触发ajax调用更新每个权限的开关。当用户单击另一个用户行时，调用模态并触发另一个ajax调用就好了。当用户翻转一个开关时，它会触发2个ajax调用，而不是一个。这是第一个问题。这是代码。
JQUERY
// PERMISSIONS MODAL
$(function() {
$('.tbody_permissions').on('click', 'button[class*=permissions_]', function () {
var permissions_id = $(this).attr("id");
$.getJSON({
type: "POST",
url: "cfc/cfc_Permissions.cfc?method=func_get_person_permissions&returnformat=json",
dataType: "json",
data: {
person_id: permissions_id,
contract_id: '<cfoutput>#permissions_contract#</cfoutput>',
project_id: '<cfoutput>#permissions_project#</cfoutput>',
company_id: '<cfoutput>#permissions_company#</cfoutput>',
},
cache: false,
success:function(data_req) {
if(data_req && data_req.length) { // DO SOMETHING
$.each(data_req, function(i, val) {
var message_type_req = data_req[i].message_type;
var user_id_req = data_req[i].user_id;
var firstname_req = data_req[i].firstname;
var lastname_req = data_req[i].lastname;
var image_req = data_req[i].image;
var permission_req = data_req[i].permission;
var purchasing_req = data_req[i].purchasing;
var timekeeping_req = data_req[i].timekeeping;
// *** SUCCESS ***
if(message_type_req == "SUCCESS" || message_type_req == "NONE") { // DO SOMETHING
$('#permission_user_id_modal').val(user_id_req);
$('#permission_name').replaceWith("<h6 class='modal-title' id='permission_name'>" + firstname_req + ' ' + lastname_req + "</h6>");
$('#permission_image').replaceWith("<div id='permission_image'><img src='" + image_req + "'></div>");
if (permission_req == 1){
$('#permission').attr('checked', 'checked');
$('#permission').val(1);
} else {
$('#permission').removeAttr('checked');
$('#permission').val(0);
};
if (purchasing_req == 1){
$('#purchasing').attr('checked', 'checked');
$('#purchasing').val(1);
}else{
$('#purchasing').removeAttr('checked');
$('#purchasing').val(0);
};
if (timekeeping_req == 1){
$('#timekeeping').attr('checked', 'checked');
$('#timekeeping').val(1);
}else{
$('#timekeeping').removeAttr('checked');
$('#timekeeping').val(0);
};
// Submit switch form data
$('#permission_modal').on('change', ':checkbox',function() {
var switched_id = $(this).attr("id");
var switched = $('#' + switched_id).val();
if (switched == 1){
$('#' + switched_id).val(0);
//console.log("switched_id: #" + switched_id);
//console.log("switched off: " + switched);
if (switched_id == 'permission'){
$('input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
$(this).trigger('click');
$(this).removeAttr('checked');
}
});
}
}else{
$('#' + switched_id).val(1);
//console.log("switched_id: #" + switched_id);
//console.log("switched on: " + switched);
};
var update_user = $('#permission_user_id_modal').val();
var contract_id_update = "<cfoutput>#permissions_contract#</cfoutput>";
var project_id_update = "<cfoutput>#permissions_project#</cfoutput>";
var company = "<cfoutput>#permissions_company#</cfoutput>";
var permission = $('#permission').val();
var purchasing = $('#purchasing').val();
var timekeeping = $('#timekeeping').val();
$.ajax({
type: "POST",
url: "cfc/cfc_Permissions.cfc?method=update_person_permissions&returnformat=json",
dataType: "json",
data: {
contract_id: contract_id_update,
project_id: project_id_update,
person_id: update_user,
company: company,
permission: permission,
purchasing: purchasing,
timekeeping: timekeeping
},
cache: false,
success:function(data_update) {
if(data_update && data_update.length) { // DO SOMETHING
$.each(data_update, function(i, val) {
// SUCCESS
if(data_update[i].message_type == "SUCCESS") { // DO SOMETHING
/*
var message_type = data_update[i].message_type;
var permission_res = data_update[i].permission;
var purchasing_res = data_update[i].purchasing;
var timekeeping_res = data_update[i].timekeeping;
*/
// *** FAIL ***
} else if(data_update[i].message_type == "FAIL"){ // DO SOMETHING
html += "<div class='alert alert-danger'><strong>Ooops:</strong> <em>" + message + "</em></div>";
$('.messagenote_settings').html(html);
}
});
}
}
});
return false;
});
// *** FAIL ***
} else { // DO SOMETHING
$('#error').val(messagenote);
}
});
}
}
});
HTML 1个复选框翻转开关的示例
<tr>
<td>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox purchasing" id="purchasing" value="1" checked="checked">
<label class="onoffswitch-label" for="purchasing">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
<td>
purchasing
</td>
<td>
<p class="small">
access to purchasing
</p>
</td>
</tr>
解决绑定问题
因此，如果我理解了这个问题，我已经添加了.off（）以取消绑定更改事件。这就是我做的。我换了
$('#permission_modal').on('change', ':checkbox',function() {
与
$('#permission_modal').off('change', ':checkbox').on('change', ':checkbox',function() {
效果不错，但我认为这可能会引发另一个问题。现在只有一个更新调用被触发但是当调用另一个用户行时，切换的CSS3开关不会更新。如果没有被绑定的能力就好了。这很奇怪，因为切换是纯CSS3，所以我只能认为它是从DOM中消失的元素。我希望这是有道理的。
答案 0 :(得分：1)
复选框在HTML标记中可以有checked属性。
那只是将true值传递给元素的checked PROPERTY，这是一个布尔值。
所以显示checked="checked"的所有标记都是错误的，因为预期的值是布尔值。
它并不重要，因为如果属性存在于尝试传递的字符串值，则属性将为true。如果不存在，则为false。
简而言之，选中复选框的真正正确标记是：
<input type="checkbox" checked>
现在，这是关于on load属性设置的HTML标记 之后，该属性无法更改，因为已经解析了标记。你必须改变财产。
这样做是这样的：
// Check:
$(element).prop("checked",true);
// Uncheck:
$(element).prop("checked",false);
或者在香草JS中：
// Check:
element.checked = true;
// Uncheck:
element.checked = false;