Question

我正在尝试进行以下操作：默认情况下，该字段右侧的“添加”按钮处于禁用状态，如果我从左侧下拉列表中选择“ +添加”，则“添加”按钮将处于活动状态，并且如果我从同一下拉菜单中选择“-减少”，减少按钮将替换字段右侧的添加按钮。

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

有人可以帮忙吗？

$exam_result = ExamResult::create([
    'exam_id' => $course->exam->id,
    'employee_id' => \Auth::id(),
    'result' => $exam_score,
    'is_complete' => $exam_score > 2
]);
$exam_result->answers()->createMany($answers);

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>

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

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

1 个答案: