CODEWITHSUNDEEP
javascriptjqueryhtml
cs_irl
cs_irl

Reputation: 187

My checkbox will not check when clicked

I am having another problem with my table and checkboxes. I ahve gotten my javascript working which allows my checkbox to check when I click anywhere within the table cell. However, now the checkbox itself doesn't work. I have tried to solve this for over an hour now, can't find an answer anywhere. Here is my javascript and a snippet of the html it is manipulating:

function tdOnclick(td) {
    for(var i = 0; i < td.childNodes.length; i++) {
        if(td.childNodes[i].nodeName == "INPUT") {
            if(td.childNodes[i].checked) {
                td.childNodes[i].checked = false;
                td.style.backgroundColor = "#FAF4E3";
            } else {
                td.childNodes[i].checked = true;
                td.style.backgroundColor = "#E1E1E1";
            }
        }
    }
}

Here is a piece of the html for the table:

 <tr>
    <td><center>9:00 - 10:00</center></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="mon09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="tue09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="wed09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="thu09"></td>
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="fri09"></td>
 </tr>

Upvotes: 8

Views: 72555

Answers (5)

samuel.molinski
samuel.molinski

Reputation: 1129

If I was a betting man, I would guess that you are having a dual click event. One for the input and one for the parent. essentially you are getting two clicks, effectively disabling your inputs. Read this post. Probability something like this would work.

<input type="checkbox" name="free" value="fri09" onclick="return false;" />

Upvotes: 2

Eva Sokolovsky
Eva Sokolovsky

Reputation: 1

use css: pointer-events: none; on checkbox. It will prevent the initial check and uncheck, but the click still will do the work.

Upvotes: 0

Lyoneel
Lyoneel

Reputation: 428

i was with same problem:

check if somewhere is calling "preventDefault", and check if the click function for checkboxes return true and if exist is before preventDefault.

i solve it with something like this:

$("#recordlist").click( function(e) {
     if (e.target.name == 'recordlistitem'){ // When recordlistitem is a checkbox(es)
        return true;
     }
     e.preventDefault();
     // other stuff here
}

Upvotes: 1

FrankieTheKneeMan
FrankieTheKneeMan

Reputation: 6810

Actually, I'm going to hazard the guess that it is working. Your click is checking the box, then the onClick event is unchecking it. Here's an idea:

<input type="checkbox" name="free" value="mon09" onClick="this.checked=!this.checked;">

It's a bit dirty, but it sucessfully ignores the click.

Working TinkerBin.

Upvotes: 7

Collin Green
Collin Green

Reputation: 2196

Your click is checking the checkbox as expected, then the TD click code is being called which you have toggling your checkbox back off.

Here is a jsfiddle with some comments showing what is happening. http://jsfiddle.net/NujXv/2/

You need to stop the event from bubbling up from the checkbox to the TD. I found this searching for the jquery function - http://api.jquery.com/event.stopPropagation. I've put a commented out line in the jsfiddle that might work, but I have real jquery experience so you might have to tweak it a bit.

Upvotes: 1

Related Questions