Check if you have any checkbox checked and enable button

Asked

Viewed 2,200 times

2

How to do in Jquery, a function that checks if there is any checkbox selected, if there is one it enables the delete button, if there is more than 1 it puts the text in the plural.

I made the following code:

JSFIDDLE DEMO

version 2.0 Fiddler update:

NOTE: I made the example below in pure javascript, but I would like it to be in JQUERY. And it still has some error that only enables when the last one is marked.

<script>
function verificaChecks() {
        var checados=0;
        var aChk = document.getElementsByName("chk_IDDel"); 
        for (var i=0;i<aChk.length;i++){ 
            if (aChk[i].checked == true){ 
                checados++;
                 document.getElementById('btn_Deletar').removeAttribute("disabled");
                if(checados >1)
                {
                    document.getElementById("btn_Deletar").value='Deletar registroS';
                }
            }  else {
                document.getElementById('btn_Deletar').setAttribute("disabled","disabled");

                 if(checados >1)
                {
                    document.getElementById("btn_Deletar").value='Deletar registroS';
                }
                else
                {
                    document.getElementById("btn_Deletar").value='Deletar registro';
                }

            }
        }
    } 
</script>

    <form>
        <input type="checkbox" name="chk_IDDel" id="chk_IDDel" value='1' onchange="verificaChecks()" />
            <br>
        <input type="checkbox" name="chk_IDDel" id="chk_IDDel" value='2' onchange="verificaChecks()" />
            <br>
        <input type="checkbox" name="chk_IDDel" id="chk_IDDel" value='3' onchange="verificaChecks()" />
            <br>
        <input type="checkbox" name="chk_IDDel" id="chk_IDDel" value='4' onchange="verificaChecks()" />
            <br><br>

    <input type="submit" value="deletar registro" id="btn_Deletar" class="btn btn-danger" disabled="true"  />
    </form>

1 answer

4


Remove the onchange="verificaChecks()" of inputs and do so with jQuery:

$(function(){
    $("[name='chk_IDDel']").change(function(){
        var countSelected = $("input[name=chk_IDDel]:checked").length;
        var $btnDeletar = $('#btn_Deletar');
        $btnDeletar.prop("disabled", countSelected == 0);
        $btnDeletar.val('Deletar registro' + (countSelected > 1 ? 's' : ''));
    });
});

Updated online example with comments suggestions.

  • 1

    so I like jquery.. the code is small. how to check the plural or not Count >1 change text?

  • 1

    @Fernando, use $("input[name=chk_IDDel]:checked").length; rather than loop all checkboxes, here have an example if it’s any help

  • 1

    edit your reply to plural.. but it worked. .obligatorit. http://jsfiddle.net/dorathoto/AdRFS/1/

  • @Rodrigo, thanks for the tip, I updated my reply with your suggestion. ^^

  • 2

    @Dorathoto can still make the shortest code (http://jsfiddle.net/AdRFS/7/). Fernando: +1

  • @Sergio, very good your solution, updated my example and my reply, thanks for the tip.

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.