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
– s.lenders, Commented Feb 26, 2013 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.. stackoverflow.com/questions/788225/… .. let me know if you want the entire code for this — K D
– K D, Commented Feb 26, 2013 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
– strah, Commented Feb 26, 2013 at 10:07
is it possible for you to add certain identifier to each column to avoid complex logic? — K D
– K D, Commented Feb 26, 2013 at 10:18

Barney · Accepted Answer · 2013-02-26 10:17:11Z

1

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/

answered Feb 26, 2013 at 10:17

Barney

16.5k5 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darth Over a year ago

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.

Barney Over a year ago

I made an update to the fiddle: 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.

s.lenders · Accepted Answer · 2013-02-26 10:11:29Z

1

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

answered Feb 26, 2013 at 10:11

s.lenders

1,1497 silver badges21 bronze badges

1 Comment

Darth Over a year ago

thanks @lenders your code is the easiest to read considering am a newbie in jquery.

adeneo · Accepted Answer · 2013-02-26 10:17:03Z

1

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

answered Feb 26, 2013 at 10:17

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

s.lenders Over a year ago

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

Terence Jefferies · Accepted Answer · 2013-02-26 10:19:53Z

1

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.

answered Feb 26, 2013 at 10:19

Terence Jefferies

3581 silver badge4 bronze badges

Comments

Sanober Malik · Accepted Answer · 2013-02-26 10:11:44Z

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, 2013 at 10:11

Sanober Malik

2,80525 silver badges30 bronze badges

1 Comment

s.lenders Over a year ago

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.

arjuncc · Accepted Answer · 2013-02-26 10:31:59Z

0

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/

answered Feb 26, 2013 at 10:31

arjuncc

3,2975 gold badges46 silver badges79 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Demo

2 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Demo

2 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related