单独禁用按钮

Question

如图所示

我想要

• 如果单击按钮 1，则按钮 2 被禁用

• 如果单击 button3，则 button4 被禁用

我之所以使用 class 和 $this 是因为我不希望按钮发生冲突。否则我会使用 ID 标签，所以我想要一些东西，如果我有多个按钮，它们如何在不冲突的情况下工作

$(function() {

  $('#container').on('click', '.btn-checkout', function(e) {

    $(this).html('proccesing order');

    $(this).attr("disabled", true);

    $('.button2') = $(this).attr("disabled", true);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST">

  <div id="container">

    <h3>this area is alone</h3>

    <button type="button" class="btn-checkout">button1</button>

    <button type="button" class='button2'>button2</button>

    <h3>this area is alone</h3>

    <button type="button" class="btn-checkout">button3</button>

    <button type="button" class="button2">button4</button>

</form>

Answer 1

用于.next()引用下一个元素。$(function() {&nbsp; $('#container').on('click', '.btn-checkout', function(e) {&nbsp; &nbsp; $(this).html('proccesing order');&nbsp; &nbsp; $(this).attr("disabled", true);&nbsp; &nbsp; $(this).next("button").attr("disabled", true);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form method="POST">&nbsp; <div id="container">&nbsp; &nbsp; <h3>this area is alone</h3>&nbsp; &nbsp; <button type="button" class="btn-checkout">button1</button>&nbsp; &nbsp; <button type="button" class='button2'>button2</button>&nbsp; &nbsp; <h3>this area is alone</h3>&nbsp; &nbsp; <button type="button" class="btn-checkout">button3</button>&nbsp; &nbsp; <button type="button" class="button2">button4</button></form>

Answer 2

那 ？？const myForm = document.forms.containermyForm.addEventListener('click', myFunction, false)&nbsp;function myFunction(evt)&nbsp;&nbsp;&nbsp; {&nbsp; // ignore other cases:&nbsp; if (!evt.target.matches('button.btn-checkout')) return&nbsp;&nbsp; evt.target.nextElementSibling.disabled = true&nbsp; }&nbsp;// disable submitmyForm.onsubmit =evt=>evt.preventDefault()&nbsp;<form method="POST" name="container">&nbsp; &nbsp; <h3>this area is alone</h3>&nbsp; &nbsp; <button type="button" class="btn-checkout">button1</button>&nbsp; &nbsp; <button type="button" class='button2'>button2</button>&nbsp; &nbsp; <h3>this area is alone</h3>&nbsp; &nbsp; <button type="button" class="btn-checkout">button3</button>&nbsp; &nbsp; <button type="button" class="button2">button4</button></form>