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

Enable both submit button on checkbox click

本文关键字：按钮 复选框 单击 提交 两个 启用      更新时间：2023-09-26

我在一个页面中使用了两个表单，但是当我点击复选框时，两个提交按钮都是活动的，但它们都是不同的。

我想点击表单一复选框然后是唯一激活的表单一提交按钮然后我点击表单二复选框然后是唯一激活的表单二提交按钮

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>

您可以相对搜索提交按钮并只启用您找到的最接近的按钮:

var checkboxes = $('input[type="checkbox"]');
checkboxes.on('click', function(e) {
  $(this).closest('form')
         .find('input[type="submit"]')
         .prop("disabled", !$(this).is(":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-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>

最简单的方法是在同一个<form>祖先中找到提交的<input>元素:

$('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中，我还纠正了两个<input>元素的重复id(并更改了name属性)。

相关文章：