I'm using the ScrewDefaultButtons jQuery plugin to replace checkboxes w/ images. The plugin uses the following code to successfully hide the checkbox and replace it with a checked/unchecked image:
$('input:checkbox').screwDefaultButtons({
image: "url(../../images/radio_check.png)",
width: 14,
height: 14
});
The issue I'm experiencing arises when trying to combine these custom checkboxes with a To-Do List plugin that uses a checkbox to mark items as completed. When an item is complete, the checkbox is ticked and the item gets moved to a "completed items" list via PHP and AJAX.
The above code successfully replaces the default checkbox w/ the custom image, but when the new checkbox is ticked, nothing occurs except the "unchecked" image changes to a "checked" image. With the default checkbox, an alert pops up confirming whether you want to move the item or not, and if confirmed, the item is moved.
The big question is: How do I get the ScrewDefaultButtons checkbox to work w/ my To-Do List's checkbox function?
This is the code for the checkbox:
Output of the default checkbox:
<td id="checkbox_parent">
<input id="ctdl-1852" class="todo-checkbox uncompleted" type="checkbox"></input>
<input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>
Output of the ScrewDefaultButton checkbox:
<td id="checkbox_parent">
<div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px"> … </div>
<input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>
PHP:
protected function show_checkbox( $id, $completed = NULL, $layout = 'table', $single = '' ) {
$permission = CTDL_Lib::check_permission( 'todo', 'complete' );
if ( $permission === true ) {
if ( is_admin() || $layout == 'table' ) $this->list .= '<td id="checkbox_parent">';
if ( $completed == 1 ) {
$this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox completed'.$single.'" checked="checked" />', esc_attr( $id ) );
} else {
$this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox uncompleted'.$single.'" />', esc_attr( $id ) );
}
$cleverness_todo_complete_nonce = wp_create_nonce( 'todocomplete' );
$this->list .= '<input type="hidden" name="cleverness_todo_complete_nonce" value="'.esc_attr( $cleverness_todo_complete_nonce ).'" />';
if ( is_admin() || $layout == 'table' ) $this->list .= '</td>';
}
}
jQuery: (Note: adding .bind("click", function () {
does not fix the issue)
$( '.todo-checkbox' ).click( function () {
var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
if ( confirmed == false ) return false;
var status = 1;
var id = $( this ).attr( 'id' ).substr( 5 );
var todoid = '#todo-' + id;
var single = $ ( this ).hasClass( 'single' );
if ($( this ).prop( 'checked' ) == false ) status = 0;
var data = {
action: 'cleverness_todo_complete',
cleverness_id: id,
cleverness_status: status,
_ajax_nonce: ctdl.NONCE
};
jQuery.post( ctdl.AJAX_URL, data, function( response ) {
if ( single != true ) {
$( todoid ).fadeOut( function () {
$( this ).remove();
});
$( '.todo-checkbox' ).prop( "checked", false );
}
} );
} );
EDIT (07/28/13): Output with Hauke's first code:
<td id="checkbox_parent">
<div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px; cursor: pointer; background-position: 0px 0px;"> … </div>
<input type="hidden" value="a81d045af8" name="cleverness_todo_complete_nonce"></input>
</td>
When the checkbox is clicked, the only difference in the output is the height of the background-position changes to -14px.
.bind('click',function(){}); or on.('click',function(){});
and just in case, put script before click event bind$( '.todo-checkbox' ).click()
, and the alert prompt came up (which didn't happen before), but if I clicked OK to move the item, nothing happened. With.bind('click',function(){});
, where do I place it?.click(function()
to place.bind('click',function()