CODEWITHSUNDEEP
jquery
DCJones
DCJones

Reputation: 3451

Combining two script elements

I have a script with a number of checkboxs which display an image in place of the normal checkbox. Depending on the state of the checkbox it displays a different image, work great.

I also have a submit button which I want to disable if any of the checkboxs are seleted. I have some code which will do this but when i include this code along with the code to change images it does not work. Is there a way I can combine the two codes together so they both work.

Code to change checkbox image

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

});

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

Code to disable submit button

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

});

});

Any help would be great.

Thanks Dereck

Upvotes: 1

Views: 71

Answers (2)

melc
melc

Reputation: 11671

If you simply set the click listener of disabling the submit button to .class_checkbox, everything works fine.

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

});

http://jsfiddle.net/s2BAp/

Upvotes: 0

Suor
Suor

Reputation: 3045

First script hides checkboxes so that they are not clicked. When divs, which displayed instead of them, are clicked corresponding checkbox state is programmatically updated. Since real checkboxes don't receive "click" events a click handler from second snippet will never execute.

The simplest way to fix this is executing

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

on div click. You can do that by moving it into this handler:

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

Upvotes: 1

Related Questions