单独禁用按钮答案

【问题标题】：Disabling buttons separately单独禁用按钮
【发布时间】：2020-10-08 05:16:44
【问题描述】：

如图示例

我想要

如果 button1 被点击，则 button2 被禁用
如果 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>

【问题讨论】：

$(this).next('.button2').prop('disabled', true)
您似乎想要单选/选项按钮？您已经在使用 jQuery，也许可以根据您的需要进行调整？ jqueryui.com/checkboxradio/#radiogroup。此外，您并没有告诉我们完整的行为集。如果单击按钮 2 会怎样？还是按钮 4？
那么您是否删除了上一个问题？
为什么<div id="container"> 没有</div> 而不仅仅是<form method="POST" name="container">？

标签： javascript html jquery

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：