Question

我的循环运行3次。

循环内部运行div并运行3次。

当在方框1 div时，我选中了复选框，如果选中则启用了按钮，否则按钮被禁用。

虽然有效，但是它在循环上运行所以它的3次保存div具有相同的类。

如果我先检查div框1复选框，则只启用框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>     
	<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>

Answer 1

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

div运行循环并执行具有相同类的禁用和启用按钮

1 个答案: