javascript - 如何使用 Bootstrap 添加条件按钮？

Question

我正在尝试做一些事情，默认情况下禁用字段右侧的“添加”按钮，如果我从左侧下拉列表中选择“+添加”，“添加”按钮将变为事件状态，如果我从同一个下拉列表中选择“- Reduce”，减少按钮将替换字段右侧的添加按钮。

通过单击字段左侧的 V 形图标可以使用 +Add 和 -Reduce 选项。

有人可以帮忙吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">


<div class="row">
  <div class="col-md-6 float-left">
    <p>Funds (Add/Reduce)</p>
  </div>
  <div class="col-md-6 mb-3 pl-0 float-left ac-set">
    <div class="input-group add-reduce-div">
      <div class="input-group-prepend">
        <div class="dropdown">
          <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu add-reduce" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#"><i class="fas fa-plus funds-icons"></i>&nbsp; Add</a>
            <a class="dropdown-item" href="#"><i class="fas fa-minus funds-icons"></i>&nbsp; Reduce</a>
          </div>
        </div>
      </div>
      <input type="number" class="form-control universal-input add-reduce-input">
      <div class="input-group-append">
        <button type="button" class="btn btn-dropdown" disabled="disabled">Add</button>
      </div>
    </div>
  </div>
</div>

Answer 1

你有没有想过这样的事情？

jQuery(document).ready(function($) {
  $(".a-plus").on('click', function(e) {
    e.preventDefault();
    var thisBtn = $(".add-reduce-input + .input-group-append .btn");
    thisBtn.attr('disabled', false);
    thisBtn.text('Add');
    thisBtn.addClass('btn-add');
    thisBtn.removeClass('btn-reduce');
  });
  $(".a-reduce").on('click', function(e) {
    e.preventDefault();
    var thisBtn = $(".add-reduce-input + .input-group-append .btn");
    thisBtn.attr('disabled', false);
    thisBtn.text('Reduce');
    thisBtn.addClass('btn-reduce');
    thisBtn.removeClass('btn-add');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">


<div class="row">
  <div class="col-md-6 float-left">
    <p>Funds (Add/Reduce)</p>
  </div>
  <div class="col-md-6 mb-3 pl-0 float-left ac-set">
    <div class="input-group add-reduce-div">
      <div class="input-group-prepend">
        <div class="dropdown">
          <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu add-reduce" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item a-plus" href="#"><i class="fas fa-plus funds-icons"></i>&nbsp; Add</a>
            <a class="dropdown-item a-reduce" href="#"><i class="fas fa-minus funds-icons"></i>&nbsp; Reduce</a>
          </div>
        </div>
      </div>
      <input type="number" class="form-control universal-input add-reduce-input">
      <div class="input-group-append">
        <button type="button" class="btn btn-dropdown" disabled>Add</button>
      </div>
    </div>
  </div>
</div>

缺少执行所需操作的代码。