How to disable all checkbox within the column when button is clicked

Question

I am a newbie when it comes to jquery and am getting muddled on my problem. Basically what I need to do is when the button is clicked, all checkbox within that column should be disabled, meaning i cannot check/uncheck it. I have searched and found this post as the closest one related to my problem but he's already advanced in terms of using jquery and providing only his' pseudo code.

Can anyone help me with my problem? Below is my code:

<table id="key_table" border="3">
    <thead>
        <tr>
            <th>
                Month 1<button id="1" class="lockButton">Lock</button><br>2013-01-01 to 2013-01-31<br>
                <table style="width: 250px;">
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;">1</td>
                            <td style="text-align:center;">2</td>
                            <td style="text-align:center;">3</td>
                            <td style="text-align:center;">4</td>
                        </tr>
                    </tbody>
                </table>
            </th>
            <th>
                Month 2 <button id="2" class="lockButton">Lock</button><br>2013-02-01 to 2013-02-28<br>
                <table style="width: 250px;">
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;">1</td>
                            <td style="text-align:center;">2</td>
                            <td style="text-align:center;">3</td>
                            <td style="text-align:center;">4</td>
                        </tr>
                    </tbody>
                </table>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input checked="checked" style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_1" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_460853mo_2" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="even">
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" onclick="javascript: update_key_type(456905, 1, 1, this)" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input checked="checked" style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_1" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 250px;">
                <table>
                    <tbody>
                        <tr class="odd">
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                            <td style="text-align:center;width:100px !important;"><input style="width: 15px !important;" class="kw_456905mo_2" type="checkbox"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

You can also check here on JSFiddle

Try not to use inline CSS, it makes your code horrable. What have you tried? — s.lenders, Feb 26 '13 at 10:01
this post will help you to find the associated column for the button you clicked. and then you can find checkboxes of that associated column easily.. http://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery .. let me know if you want the entire code for this — K D, Feb 26 '13 at 10:04
Try not to use `!important` in inline CSS. Inline CSS has highest priority anyway, adding `!important` to it makes the style impossible to overwrite if you need to... — strah, Feb 26 '13 at 10:07
is it possible for you to add certain identifier to each column to avoid complex logic? — K D, Feb 26 '13 at 10:18

score 1 · Answer 1 · answered Feb 26 '13 at 10:11

First don't use inline CSS it is horrable and makes your code unreadable. Use classes and ID's to define styles in a stylesheet.

Next add a class to the <td> for which month they are from. The ID of a button tells the row number. Then add a class named: class='monthX' for example class=month1

Then link this jQuery

$(document).ready(function() {

    $("button").click(
    function () {
        var id = $(this).attr("id");
        $(".month"+id+" input[type=checkbox]").attr('disabled', 'disabled');
    }); 

});

Updated fiddle

thanks @lenders your code is the easiest to read considering am a newbie in jquery. — Darth, Feb 26 '13 at 10:44

score 1 · Answer 2 · answered Feb 26 '13 at 10:17

Something like :

$('.lockButton').on('click', function() {
  $('#key_table > tbody > tr').find('input[type="checkbox"][class$="'+this.id+'"]')
                              .prop('disabled', true);
});

FIDDLE

Not sure if the point was to toggle the disabled state, but anyway:

$('.lockButton').data('locked', false).on('click', function() {
    var cl  = this.id,
        lc  = $(this).data('locked');
    $(this).data('locked', !lc);
    $('#key_table > tbody > tr').find('input[type="checkbox"][class$="'+cl+'"]')
                                .prop('disabled', !lc);
});

FIDDLE

You should do: `find('input[type="checkbox"][class$="_'+this.id+'"]')` in case he creates 12 months (which i expect) because when hitting button 1 or 2 it would disable 11 and 12 to — s.lenders, Feb 26 '13 at 10:33

score 1 · Accepted Answer · answered Feb 26 '13 at 10:17

I forked your fiddle to demonstrate the solution. Essentially, for each lock button, you want to:

Keep a record of whether the action is to lock or unlock (I assume toggle behaviour makes more sense);
Grab all the checkboxes this button should affect (I've elaborated on that code beneath — it's a bit sticky);
And, when clicked, switch the record we made in #1...
And apply that to the disabled attribute of all the checkboxes we saved in #2.

This code grabs the index of the parent header, which gives us the column

var column      = $(this).closest('th').index();

Then we want to get the cells of that column immediately inside the first tbody within our table (there are nested tables, so this had to be complicated)

var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (column + 1) + ')').find('[type=checkbox]');

Demo

http://jsfiddle.net/barney/B9h2v/

by the way @Barney, how can I change the text of the button from 'Lock' to 'Unlock' and vice-versa? It is kinda confusing if the button still say 'Lock' when the checkboxes are already locked/disabled. — Darth, Feb 26 '13 at 11:04
I made an [update to the fiddle](http://jsfiddle.net/barney/B9h2v/2/): set up another variable — `buttonText` — to contain the text, change its value depending on the `lock` value, then apply it to the button with jQuery. — Barney, Feb 26 '13 at 12:19

score 1 · Answer 4 · answered Feb 26 '13 at 10:19

you could try this out:

$(function() {
    $('#key_table input:checkbox').click(function() {
        if($(this).is(':checked')) {
            $(this).parent().parent().find('input:checkbox').attr('disabled',true);
            $(this).removeAttr('disabled');
        } else {
            $(this).parent().parent().find('input:checkbox').removeAttr('disabled');
        }
    });
});

Hopefully that will suite your needs

Cheers,

Terence.

score 0 · Answer 5 · answered Feb 26 '13 at 10:11

0

Maybe this could help you :

Demo

$("#1").click(function(){
    $("input.kw_460853mo_1").attr("disabled", true);
    $("input.kw_456905mo_1").attr("disabled", true);
});

$("#2").click(function(){
    $("input.kw_460853mo_2").attr("disabled", true);
    $("input.kw_456905mo_2").attr("disabled", true);
});

answered Feb 26 '13 at 10:11

Sanober Malik

2,765
23
30

1

I'm guessing that there will be added lines with classes that are dynamic. Then he needs to change the jQuery every time a line is added. – s.lenders Feb 26 '13 at 10:16

score 0 · Answer 6 · answered Feb 26 '13 at 10:31

Add a common class for the rows you want to disbale. Here I put 'month1','month2' as the class name. Then disable the input fields with in the curresponding class.

sample

.
.
 <tr class="odd month1">  
<td><input checked="checked" type="checkbox"></td>
<td ><input type="checkbox"></td>
</tr>
.
.

 $("#1").click(function(){
    $(".month1 input").attr("disabled", true);
    })

http://jsfiddle.net/arjuncc/zXqCE/16/

How to disable all checkbox within the column when button is clicked

6 Answers6

Demo