divループを実行し、同じクラスで無効化と有効化ボタンを実行します

ループは3回実行されます。divループを実行し、同じクラスで無効化と有効化ボタンを実行します

ループの内部でdivが実行され、3回実行されます。

ボックス1の場合divチェックボックスをオンにしてチェックが付いている場合はボタンが有効になり、それ以外の場合は無効になります。

これは動作しますが、そのループで実行されるので、その3回は同じクラスのdivを保存します。

最初にチェックすると、ボックス1のチェックボックスのようにdivが有効になり、ボックス1のボタンのみが有効になります。divその他divは影響を受けません。

チェックボックス3のチェックボックスをオンにすると、このボタンのみが無効になります。

これはどのように可能ですか？

私のコード

$(document).ready(function(){ 
 

 
    $('body').on('click' , '.currentcheck' , function() { 
 
     $(this).toggleClass("checked"); 
 

 
     if ($(".currentcheck.checked").length>0) { 
 
     $('.btn_disable').prop('disabled', false); 
 
     } else { 
 
     $('.btn_disable').prop('disabled', true); 
 
     } 
 
    }); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Test Your Self</title> 
 
    <meta name="viewport" content="width=device-width initial-state=1"/> 
 
</head> 
 
<body>  
 
\t <form> 
 
\t <div class="box"> 
 
\t \t <div class="element_checkbox"> 
 
\t \t  <p>box 1</p> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
      <button class="btn_disable" disabled>next</button> 
 
\t \t </div> 
 
\t \t <div class="element_checkbox"> 
 
\t \t  <p>box 2</p> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <button class="btn_disable" disabled>next</button> 
 
\t \t </div> 
 
\t \t <div class="element_checkbox"> 
 
\t \t  <p>box 3</p> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <input type="checkbox" name="chec1" class="currentcheck"> 
 
\t \t \t <button class="btn_disable" disabled>next</button> 
 
\t \t </div> 
 
\t </div> 
 
\t </form> 
 

 
</body> 
 
</html>

出典

2017-12-05 xhander meck

だから、ラジオボタンのグループを再発明していますか？ – epascarello

$(document).ready(function() { 
 

 
    $('body').on('click', '.currentcheck', function() { 
 
    var $this = $(this); 
 
    //get the parent that encapsulates the checkboxes related to the one that was clicked 
 
    var $parent = $this.closest('.element_checkbox'); 
 
    
 
    $this.toggleClass("checked"); 
 

 
    //only look at the checkboxes in the parent 
 
    //only change the btn in the parent 
 
    if ($parent.find(".currentcheck.checked").length > 0) { 
 
     $parent.find('.btn_disable').prop('disabled', false); 
 
    } else { 
 
     $parent.find('.btn_disable').prop('disabled', true); 
 
    } 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test Your Self</title> 
 
    <meta name="viewport" content="width=device-width initial-state=1" /> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <div class="box"> 
 
     <div class="element_checkbox"> 
 
     <p>box 1</p> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <button class="btn_disable" disabled>next</button> 
 
     </div> 
 
     <div class="element_checkbox"> 
 
     <p>box 2</p> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <button class="btn_disable" disabled>next</button> 
 
     </div> 
 
     <div class="element_checkbox"> 
 
     <p>box 3</p> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <input type="checkbox" name="chec1" class="currentcheck"> 
 
     <button class="btn_disable" disabled>next</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
</body> 
 

 
</html>

出典

2017-12-05 22:08:01 Taplar

divループを実行し、同じクラスで無効化と有効化ボタンを実行します

答えて

関連する問題