Question

我有一个带有许多复选框的脚本，这些复选框显示一个图像来代替普通复选框。根据复选框的状态，它会显示不同的图像，效果很好。

我还有一个提交按钮，如果选中任何复选框，我想要禁用它。我有一些代码将执行此操作，但当我包含此代码以及更改图像的代码时，它不起作用。有没有办法可以将两个代码组合在一起，这样它们都可以工作。

更改复选框图像的代码

$('.checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

禁用提交按钮的代码

$(function() {
$(".checkbox").click(function(){
    $('.delete').prop('disabled',$('input.checkbox:checked').length >0);

});

}）;

任何帮助都会很棒。

谢谢Dereck

Answer 1

第一个脚本会隐藏复选框，以便不会单击它们。当单击显示而不是它们的div时，将以编程方式更新相应的复选框状态。由于真正的复选框不会收到“点击”事件，因此第二个代码段中的点击处理程序将永远不会执行。

解决此问题的最简单方法是执行

$('.delete').prop('disabled', $('input.checkbox:checked').length > 0);

点击div上的

。你可以把它移到这个处理程序中来做到这一点：

$('.class_checkbox').on('click', function() {
    //...
});

Answer 2

如果您只是将禁用提交按钮的点击监听器设置为.class_checkbox，那么一切正常。

$(".class_checkbox").click(function(){
    $('.delete').prop('disabled',$('input.checkbox:checked').length >0);

});

http://jsfiddle.net/s2BAp/

结合两个脚本元素

2 个答案: