在復選框上同時啟用兩個提交按鈕

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

您可以相對地搜索“提交”按鈕並僅啟用找到的最接近的按鈕：

 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> 

Answer 2

最簡單的方法是簡單地在同一<form>祖先中找到Submit <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屬性）。