【发布时间】:2016-02-18 17:05:53
【问题描述】:
function toggleDisabled(target) {
var confirm = $("input:checkbox:checked");
if (!confirm.length > 0) {
$("#confirm").addClass('disabled');
} else {
$("#confirm").removeClass('disabled');
}
}
var $notnull = $('.notnull');
$(document).on('keyup change', '.notnull', function(e) {
console.log(e.currentTarget)
toggleDisabled(e.currentTarget);
});
$notnull.each(function(i, el) {
toggleDisabled(el);
});
function reload() {
$notnull.each(function(i, el) {
toggleDisabled(el);
});
}
function toggleDisabledNavButton(target) {
var $target = $(target);
var basic = $target.find('input').hasClass('disabled');
if (basic) {
$("#add").addClass('disabled');
} else {
$("#add").removeClass('disabled');
}
}
var detailscontainer = $('.notnull');
$(document).on('keyup change click', 'input.notnull', function(e) {
e.preventDefault();
toggleDisabledNavButton($(e.currentTarget).closest('.info'));
});
detailscontainer.each(function(i, el) {
toggleDisabledNavButton(el.closest('.info'));
});
.disabled {
border-color: red;
background: gray;
//pointer-events: none;
}
input[type=checkbox].disabled {
outline: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='info'>
<input type="checkbox" name="" class="notnull disabled" id="confirm">
<label for="confirm">Confirm</label>
<input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>
我想创建一个验证,例如 我同意条款和条件 我创建了几个函数来运行脚本。当我添加代码来检查复选框是否没有类 disabled 时,复选框不再被选中。我想让这段代码工作,因为我想在验证中添加更多复选框,比如法定年龄等。我找不到我做错了什么,我无法确定为什么不再检查复选框。
问题:
- 为什么我的复选框没有被选中。
这是添加function toggleDisabledNavButton(target)之前的代码
function toggleDisabled(target) {
var confirm = $("input:checkbox:checked");
if (!confirm.length > 0) {
$("#confirm").addClass('disabled');
} else {
$("#confirm").removeClass('disabled');
}
}
var $notnull = $('.notnull');
$(document).on('keyup change', '.notnull', function(e) {
console.log(e.currentTarget)
toggleDisabled(e.currentTarget);
});
$notnull.each(function(i, el) {
toggleDisabled(el);
});
function reload() {
$notnull.each(function(i, el) {
toggleDisabled(el);
});
}
.disabled {
border-color: red;
background: gray;
//pointer-events: none;
}
input[type=checkbox].disabled {
outline: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='info'>
<input type="checkbox" name="" class="notnull disabled" id="confirm">
<label for="confirm">Confirm</label>
<input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>
预期:
- 当复选框被选中时,它应该删除复选框和按钮上的红色边框。我没有看到正在发生的事情。现在我什至无法选中复选框。
【问题讨论】:
-
那么你想要的行为是什么?
-
加载时,当我
click on the checkbox and it is checked删除复选框上的禁用时,它们都禁用了类。然后在按钮上单击检查复选框是否已禁用类,如果未提交。没有function toggleDisabledNavButton(target)在我添加后它工作正常,复选框不能再被选中@lordkain -
@lordkain 更新了问题,以便您看到差异
-
你不用按钮做任何事情!您只需更改复选框的类别。给你按钮一个 id,然后添加删除 disabled 属性的 soem 脚本
-
添加了一个答案,请将最佳答案标记为有效,这可能对以后遇到同样问题的用户有所帮助! @马丁1
标签: jquery validation checkbox