Question

我在一个页面中使用了两个表单但是当我单击复选框时，两个提交按钮都处于活动状态，但两者都不同。

我想点击表单一个复选框，然后单击表单一个提交按钮激活，然后单击表单两个复选框，然后单独表单两个提交按钮激活。

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

<h1>form one</h1>
<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>
<h1>form two</h1>
<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>

Answer 1

您可以相对搜索提交按钮进行搜索，并仅启用您找到的最近的按钮：

＆＃13;

var checkboxes = $('input[type="checkbox"]');
checkboxes.on('click', function(e) {
  $(this).closest('form')
         .find('input[type="submit"]')
         .prop("disabled", !$(this).is(":checked"));
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
    <div>
        <input type="checkbox" name="option-0" id="option-0"> <label for="option-0">Option 0</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>
<h1>form two</h1>
<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>

＆＃13;

Answer 2

最简单的方法是简单地找到同一<input>祖先中的Submit <form>元素：

$('input[type=checkbox]').on('change', function(){
  $(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});

$('input[type=checkbox]').on('change', function() {
  $(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
  <div>
    <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
  </div>

  <div>
    <input type="submit" value="Do thing" disabled>
  </div>
</form>
<h1>form two</h1>
<form>
  <div>
    <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 1</label>
  </div>

  <div>
    <input type="submit" value="Do thing" disabled>
  </div>
</form>

请注意，在您的HTML中，我还纠正了两个id元素中重复的<input>（并且还更改了name属性）。

启用复选框单击时的两个提交按钮

2 个答案: