2017-06-02 9 views
-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> 
+5

あなたがこれまでにしようとしているものを表示します。 –

+0

@AnilRokad - あなたはどこにいるのですか?また、AJAXは必要ありません。これは無関係のテクノロジーです。サーバーに情報を送信し、ソフトウェアの動作がそれに依存している場合を除きます。 – bcosynot

+0

[jQueryの無効化/有効化送信ボタン]の複製(https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button) –

答えて

1

これを試してみてください:

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

2

私はこのスニペットは、何が必要であると思います。

これは最も簡単な方法ですが、必要に応じてさらに効果を上げることができます。

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