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>

@AnilRokad - where are you stuck? Also, AJAX is not needed. That's an unrelated technology, unless you are sending information to your server and your software's behavior is dependent on that. — bcosynot, Jun 02 '17 at 08:39
Possible duplicate of [jQuery disable/enable submit button](https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button) — Mario Santini, Jun 02 '17 at 08:41

score 2 · Answer 1 · answered Jun 02 '17 at 08:48

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>

score 1 · Accepted Answer · answered Jun 02 '17 at 08:51

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>

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

2 Answers2