How to enable and disable button when click checkbox button using JQuery

Question

I want When single checkbox is selected that time Edit and Delete Button are Enable, Add Button Disable

When Two or more checkbox are selected that time Delete Button is Enable and Add and Edit Button are Disable

My Html Code :

    <div>
        <button type="button" id="btnAddID" name="btnAdd"> Add </button>
        <button type="button" id="btnEditID" name="btnEdit"> Edit </button>
        <button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
    </div>
    <br/>
    <div>
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>Name</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1</td>
                    <td>ABC</td>                        
                </tr>
                 <tr>
                    <td><input type="checkbox" /></td>
                    <td>2</td>
                    <td>XYZ</td>                        
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>3</td>
                    <td>PQR</td>                        
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>4</td>
                    <td>MLN</td>                        
                </tr>
            </tbody>
        </table>            
    </div>
</div>

Answer 1

I guess this snippet is what you need.

This is the simplest way but you could do better if you want.

 $(document).ready(function(){ $('input[type=checkbox]').change(function(){ var count = 0; $.each($('input[type=checkbox]'), function(){ if($(this).prop('checked') == true){ count++; } }); if(count == 1) { $('#btnEditID').prop('disabled', false); $('#btnDeleteID').prop('disabled', false); $('#btnAddID').prop('disabled', true); } else { $('#btnDeleteID').prop('disabled', false); $('#btnEditID').prop('disabled', true); $('#btnAddID').prop('disabled', true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <button type="button" id="btnAddID" name="btnAdd"> Add </button> <button type="button" id="btnEditID" name="btnEdit"> Edit </button> <button type="button" id="btnDeleteID" name="btnDelete"> Delete </button> </div> <br/> <div> <table> <thead> <tr> <th></th> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>ABC</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>XYZ</td> </tr> <tr> <td><input type="checkbox" /></td> <td>3</td> <td>PQR</td> </tr> <tr> <td><input type="checkbox" /></td> <td>4</td> <td>MLN</td> </tr> </tbody> </table> </div> </div> 

Answer 2

Try this:

 $('input[type="checkbox"]').change(function(){ var checked = $('input[type="checkbox"]:checked').length; if(checked === 0){ $("button").prop('disabled',false); }else if(checked === 1){ $("button").prop('disabled',false); $("#btnAddID").prop('disabled', true); }else{ $("#btnAddID,#btnEditID").prop('disabled', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button type="button" id="btnAddID" name="btnAdd"> Add </button> <button type="button" id="btnEditID" name="btnEdit"> Edit </button> <button type="button" id="btnDeleteID" name="btnDelete"> Delete </button> </div> <br/> <div> <table> <thead> <tr> <th></th> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>ABC</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>XYZ</td> </tr> <tr> <td><input type="checkbox" /></td> <td>3</td> <td>PQR</td> </tr> <tr> <td><input type="checkbox" /></td> <td>4</td> <td>MLN</td> </tr> </tbody> </table> </div>