单独禁用按钮

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() {

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

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

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

    $(this).next("button").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 2

那 ？？

const myForm = document.forms.container

myForm.addEventListener('click', myFunction, false) 

function myFunction(evt)  

  {

  // ignore other cases:

  if (!evt.target.matches('button.btn-checkout')) return 

  evt.target.nextElementSibling.disabled = true

  }

 // disable submit

myForm.onsubmit =evt=>evt.preventDefault() 

<form method="POST" name="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>