使用JQuery单击复选框按钮时如何启用和禁用按钮

Question

我想当选中单个复选框时，编辑和删除按钮为启用，添加按钮禁用

当选择两个或更多复选框时，删除按钮为启用时间，添加和编辑按钮为禁用

我的Html代码：

    <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

我想这个代码片段就是您所需要的。

这是最简单的方法，但如果你愿意，你可以做得更好。

$(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

试试这个：

$('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>