Click table row to select checkbox and disable/enable button jquery

Question

HTML:

<table class="vi_table">
    <thead>
        <tr>
            <th><input type="checkbox" class="v_checkbox"/>Select</th>
            <th>ID</th>
            <th>A</th>
            <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pv">
            <td><input type="checkbox" class="v_checkbox"/></td>
            <td>5</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td><input type="checkbox" class="v_checkbox"/></td>
            <td>1</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td><input type="checkbox" class="v_checkbox"/></td>
            <td>9</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
    </tbody>
</table>

<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">

Css:

.diff_color {
    background: gray;
}

.vi_table {
    background: #c3ced6;
    border: 1px solid black;
    margin-bottom: 30px;
    padding: 5px;
}

.vi_table thead tr th {
    border: 1px solid black;
}

Jquery:

$(document).ready(function () {
    $(document).on('click', '.vi_table tbody tr', function (e) {
        var submit = $('#percentage_submit_button');
        var checked= $(this).find('input[type="checkbox"]');

        submit.prop('disabled', true);

        checked.prop('checked', !checked.is(':checked'));

        if($('.v_checkbox').is(':checked')) {
            $(this).closest('tr').addClass('diff_color');
            submit.removeAttr('disabled');
        } else {
            $(this).closest('tr').removeClass('diff_color');
            submit.prop('disabled', true);
        }
    });


    $(document).on('click', 'input[type="checkbox"]', function () {
        $(this).prop('checked', !$(this).is(':checked'));
        $(this).parent('tr').toggleClass('selected'); // or anything else for highlighting purpose
    });

});

So Far - Fiddle

I want to select the checkbox by clicking anywhere on the row including the checkbox. I would like to enable and disable the button if any one of the checkbox is selected in the tbody.

clicking the Selectall checkbox needs to select all the rows and enable the button.

Still I have some issues on selecting and deselecting the checkbox.

I gave the example of what I have tried so far, but I would like to make this clean like non repeating code. how can I make this code simple and more efficient way?

Thanks

hi i have checked your code. Fidle is not working because you have not included jquery Try this jsfiddle.net/hoqw2tay/1 — Manish Shukla
– Manish Shukla, Commented Apr 28, 2015 at 10:16
It's working. But still after I select the multiple rows and deselected it and still the row was highlighting. @manishshukla — Learner
– Learner, Commented Apr 28, 2015 at 10:38
@manishshukla Thank you very much. Is it possible that we can add the select all code into the same function? selecting all should select all the tbody checkboxes and enable the button — Learner
– Learner, Commented Apr 28, 2015 at 10:52

Jamie Barker · Accepted Answer · 2015-04-28 10:52:00Z

1

Made a few changes so the checkboxes align. See code comments for further info:

Fiddle in case Code Snippet doesn't work

var testing = function (e) {
    var submit = $('#percentage_submit_button');
    var checkbox = $(this);
    if ($(this).is('tr')) {
        checkbox = $(this).find('input[type="checkbox"]');
    }

    submit.prop('disabled', true); // Disable submit button

    checkbox.prop('checked', !checkbox.is(':checked')); // Change checked property
    
    if (checkbox.hasClass('all')) { // If this is "all"
        $('.v_checkbox:not(.all)').prop('checked', checkbox.is(':checked'));  // Set all other to same as "all" 
        if (checkbox.is(':checked')) { // change colour of "all" tr
            checkbox.closest('tr').addClass('diff_color');  
        } else {
            checkbox.closest('tr').removeClass('diff_color');  
        }
    }

    var blnAllChecked = true; // Flag all of them as checked
    $('.v_checkbox:not(.all)').each(function() { // Loop through all checkboxes that aren't "all"
        if ($(this).is(':checked')) {
            $(this).closest('tr').addClass('diff_color');
            submit.prop('disabled', false); // enable submit if one is checked
        } else {
            $(this).closest('tr').removeClass('diff_color');
            blnAllChecked = false; // If one is not checked, flag all as not checked
        }
    });
    
    if (blnAllChecked) {
        $('.v_checkbox.all').closest('tr').addClass('diff_color');
        $('.v_checkbox.all').prop('checked', true);
    } else {
        $('.v_checkbox.all').closest('tr').removeClass('diff_color');
        $('.v_checkbox.all').prop('checked', false);
    }
};

$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);

.diff_color {
    background: gray;
}
.vi_table {
    background: #c3ced6;
    border: 1px solid black;
    margin-bottom: 30px;
    padding: 5px;
}
.vi_table thead tr th {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="vi_table">
    <thead>
        <tr class="pv">
            <th>
                <input type="checkbox" class="v_checkbox all" />Select</th>
            <th>ID</th>
            <th>A</th>
            <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pv">
            <td>
                <input type="checkbox" class="v_checkbox" />
            </td>
            <td>5</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td>
                <input type="checkbox" class="v_checkbox" />
            </td>
            <td>1</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td>
                <input type="checkbox" class="v_checkbox" />
            </td>
            <td>9</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
    </tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">

answered Apr 28, 2015 at 10:52

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

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

12 Comments

Learner Over a year ago

Thank you Jamie. Its looks clean. :-)

Learner Over a year ago

Hi, For some reason. After i implemented this code to my application, When I click the Checkbox on the tbody is not checked and select all is not working. do you know that i anything doing wrong?

Jamie Barker Over a year ago

@Sri have you added all to the class of the checkbox in thead?

Learner Over a year ago

Thanks @jamiebarker . Sorry I missed that part and after added it its all working. The only one issue is when I click the row, the checkbox of the row is selected fine. But If I click the checkbox, checkbox.prop('checked', !checkbox.is(':checked')); this line is unselect it again.

Jamie Barker Over a year ago

@Sri Clicking the checkbox checks and unchecks at the same time?

|

Cobote · Accepted Answer · 2015-04-28 11:41:32Z

I added an id to the select all input <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>

The select all input is checked first. Applying it's status to each input, then using the .each() to loop though each row and apply the row styles.

Demo here: JSfiddle

$(document).ready(function () {
    var testing = function (e) {
        var submit = $('#percentage_submit_button');
        var checked = $(this).find('input[type="checkbox"]');
        var checkedAll = $('#v_checkbox_all');
        var isAllChecked = false;

        submit.prop('disabled', true);

        checked.prop('checked', !checked.is(':checked'));
        $(this).prop('checked', !$(this).is(':checked'));

        var checkedCount = $('.v_checkbox:checked').not('#v_checkbox_all').length;
        var totalCount = $('.v_checkbox').not('#v_checkbox_all').length;

        if (checked.prop('id') === 'v_checkbox_all') {
            isAllChecked = true;
        } else {
            if (checked.prop('id') === 'v_checkbox_all' || checkedCount === totalCount) {
                checkedAll.prop('checked', true);
            } else {
                checkedAll.prop('checked', false);
            }
        }

        if (isAllChecked) {
            if (checkedAll.is(':checked')) {
                $('.v_checkbox').each(function () {
                    $(this).prop('checked', true);
                });
            } else {
                $('.v_checkbox').each(function () {
                    $(this).prop('checked', false);
                });
            }
        }

        $('.v_checkbox').each(function () {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('diff_color');
                submit.removeAttr('disabled');
            } else {
                $(this).closest('tr').removeClass('diff_color');
            }
        });
    };

    $(document).on('click', '.pv', testing);
    $(document).on('click', 'input[type="checkbox"]', testing);

    $('#percentage_submit_button').prop('disabled', true);
});

QArea · Accepted Answer · 2015-04-29 13:18:09Z

1

For selecting ALL checkboxes use this code:

 $('.v_checkbox').change(function(){
        $('.v_checkbox').each(function(){
        $(this).prop( "checked", true );
        })
    ;
    })

answered Apr 29, 2015 at 13:18

QArea

5,0231 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Click table row to select checkbox and disable/enable button jquery

HTML:

Css:

Jquery:

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

Css:

Jquery:

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related