如何启用和禁用按钮使用JQuery

-1

点击复选框按钮时，我想如果一个复选框被选中那个时候编辑和删除按钮被启用，添加按钮禁用如何启用和禁用按钮使用JQuery

当两个或两个以上的复选框被选中那个时候删除按钮启用和添加和编辑按钮都禁用

我的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>

来源

2017-06-02 R.A.M

显示你有什么到目前为止已经试过。 –

@AnilRokad - 你卡在哪里？另外，AJAX不是必需的。这是一种无关的技术，除非您将信息发送到您的服务器，并且您的软件的行为取决于此。 – bcosynot

[jQuery禁用/启用提交按钮]的可能重复（https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button） –

试试这个：

$('input[type="checkbox"]').change(function(){ 
 
    var checked = $('input[type="checkbox"]:checked').length; 
 
    if(checked === 0){ 
 
    \t $("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>

来源

2017-06-02 08:51:27

我想这个片段就是你需要的。

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

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

来源

2017-06-02 08:48:15

如何启用和禁用按钮使用JQuery

回答

相关问题