CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rhendar
Rhendar

Reputation: 450

Check box controlled by parent table cell

I have a table and within this table there is a column that is entirely check boxes. This table is going to be visible on mobile devices so it would be nice if the check boxes were easy to use. So I am attempting to figure out how to have the table cell parent, td, control the checking of the check box. So the user isn't actually clicking on the check box itself but rather the table cell. To do this I setup an onclick function for the td which checks or un-checks the corresponding check box. This works fine so long as the user doesn't click on the check box itself. If that happens then the box checks itself and then un-checks itself because it is following what it normally does and then calls the custom listener afterwards. I've attempted to set the check box to disabled but a giant prohibited (no-smoking like) symbol appears when run in Chrome. So is there a way to leave the check box as a whole enabled but disable the checking functionality of it?

Edit:

I tried using the higher z-index and it didn't like that at all. Here's what the code looks like: 

<td style="text-align:center; width: 20%;">
        <div id="checkboxCell{{:#index}}"  onclick="PageConfigHome.toggleCheckboxes({{:#index}});" style="position:absolute; z-index: 999;">
            <input type="checkbox" style="z-index: 1" onclick="PageConfigHome.toggleCheckBoxes(null);" id="checkbox{{:#index}}" class="HomeScreenCheckbox"/>
        </div>
    </td>

Solution: I found this post that resolved my issue: Tick a checkbox in a table cell by clicking anywhere in the table cell

Upvotes: 0

Views: 130

Answers (2)

dima
dima

Reputation: 1189

have you tried passing an event to the click event and use event.stopPropagation(); which prevents events from bubbling up? See this

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Put an absolutely-positioned DIV in the same cell, with a higher z-index. Put the click event on the DIV instead.

Upvotes: 0

Related Questions