如何啓用和禁用按鈕使用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

回答

相關問題