时间戳

首页 > 解决方案 > 单独禁用按钮

javascript - 单独禁用按钮

问题描述

如图示例

我想要

我之所以使用 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>

标签： javascripthtmljquery

解决方案

用于.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>

推荐阅读