Check all checkboxes and enable button

1
votes

I have a problem checking all the checkboxes and once they're checked, the button should be disabled. I'm new to JavaScript and it's really hard for me to understand how I can fix this. Anyone who would know how to fix this would be really a big help for my project.

Here's my code by the way:

                <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title></title>
                <style type="text/css">
                    body
                    {
                        font-family: Arial;
                        font-size: 10pt;
                    }
                </style>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('.chk1').change(function () {
                            if ($(this).is(":checked")) {
                                $('#btnClick').removeAttr('disabled');
                            }
                            else {
                                var isChecked = false;
                                $('.chk1').each(function () {
                                    if ($(this).is(":checked")) {
                                        $('#btnClick').removeAttr('disabled');
                                        isChecked = true;
                                    }
                                });
                                if (!isChecked) {
                                    $('#btnClick').attr('disabled', 'disabled');
                                }
                            }


                        })
                    });
                </script>
                <script type="text/javascript">
                    function checkALL(){
                        var chk_arr =  document.getElementsByName("draw[]");        
                        for(k=0;k< chk_arr.length;k++)
                        {
                            chk_arr[k].checked = true;
                        } 
                    CheckIfChecked();
                    }

                    function unCheckALL(){
                        var chk_arr =  document.getElementsByName("draw[]");             
                        for(k=0;k< chk_arr.length;k++)
                        {
                            chk_arr[k].checked = false;
                        } 
                        CheckIfChecked();
                    }
                </script>
            </head>
            <body>
                <table border="0" cellpadding="0" cellspacing="0">
                    <a href="javascript:selectToggle(true, 'drawing');" id="show" onclick="checkALL();">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide" onclick="unCheckALL();">None</a>
                    <tr>
                        <td>
                            <input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" onClick="CheckIfChecked(this.id)" name="name" />
                            One
                        </td>
                        <td>
                            <input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
                            Two
                        </td>
                        <td>
                            <input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
                            Three
                        </td>
                        <td>
                            <input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
                            Four
                        </td>
                    </tr>
                    <button id="btnClick" disabled="disabled">
                        Click me !!!</button>
                </table>
            </body>
            </html>

In my code when I check one or more checkboxes the button gets enabled and when there is no checked checkbox the button gets disabled. Now my problem is when I click the All link, it should check all the checkboxes and enable the button and when I click the None it should uncheck the checkboxes and disable the button.

4
javascriptjquerybuttoncheckbox

4 Answers

3
votes

To check all and uncheck checkboxes use JQuery. Give all the checkboxes the same class, for example "chk1" and then call 

$( ".chk1" ).prop ('checked', true);

You can then iterate all elements of the class and check if they are all checked 

$( ".chk1" ).each(function() {
    if ($(this).is(':checked'))
      // do something 
})
1
votes

The shortest code to achieve your stated objective is as follows:

$(function() {
    $('#show').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', true);
        $('#btnClick').prop('disabled', false);
    });
    $('#hide').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', false);
        $('#btnClick').prop('disabled', true);
    });
});

In the following demo, you'll notice that your markup was cleaned to take care of the following:

  • Remove inline JavaScript which among other thing is a nightmare to maintain.
  • Remove duplicate IDs; IDs should be unique.
  • Remove repeated element attributes

$(function() {
    $('#show').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', true);
        $('#btnClick').prop('disabled', false);
    });
    $('#hide').on('click', function(e) {
        e.preventDefault();
        $('.chk1').prop('checked', false);
        $('#btnClick').prop('disabled', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0">
                    <a id="show" href="#">All</a> | <a href="#" id="hide">None</a>
                    <tr>
                        <td>
                            <input type="checkbox"  class="chk1"  name="name" />
                            One
                        </td>
                        <td>
                            <input type="checkbox" class="chk1"  name="name" />
                            Two
                        </td>
                        <td>
                            <input type="checkbox" class="chk1" name="name" />
                            Three
                        </td>
                        <td>
                            <input type="checkbox" class="chk1" name="name" />
                            Four
                        </td>
                    </tr>
                    <button id="btnClick" disabled="disabled">
                        Click me !!!</button>
                </table>
0
votes

Try this , short and simple. (See snippet for HTML)

  1. removed inline JS.
  2. simplified and reduced the code.

JS 

$('.chk1').change(function () {
    if ($(".chk1:checked").length >= 1) {
        $('#btnClick').removeAttr('disabled');
    } else {
        $('#btnClick').attr('disabled', 'disabled');
    }
});
$('#show').click(function () {
    $('.chk1').prop('checked', true);
    $('.chk1').trigger('change')
});
$('#hide').click(function () {
    $('.chk1').prop('checked', false);
    $('.chk1').trigger('change')
});


$('.chk1').change(function () {
    if ($(".chk1:checked").length >= 1) {
        $('#btnClick').removeAttr('disabled');
    } else {
        $('#btnClick').attr('disabled', 'disabled');
    }
});
$('#show').click(function () {
    $('.chk1').prop('checked', true);
    $('.chk1').trigger('change')
});
$('#hide').click(function () {
    $('.chk1').prop('checked', false);
    $('.chk1').trigger('change')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0"> <a href="#" id="show">All</a> | <a href="#" id="hide">None</a>

    <tr>
        <td>
            <input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" name="name" />One</td>
        <td>
            <input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Two</td>
        <td>
            <input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Three</td>
        <td>
            <input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Four</td>
    </tr>
    <button id="btnClick" disabled="disabled">Click me !!!</button>
</table>

Note :
1.Used trigger so that the button will be enabled / disabled based on click.
2.If value of href is # then above code works fine, if it has some other URL , then you have use events like @PeterKA mentoned in his answer.

0
votes

This code will help for your query "once you've checked all the checkbox the button will be disabled"

$('.chk1').change(function () {
   if ($('.chk1:checked').length == $('.chk1').length) {
      $('#btnClick').prop('disabled',true);
   }
   else{
      $('#btnClick').prop('disabled',false);
   }
 });