如何使用Bootstrap实现条件触发的按钮状态切换与替换？

Got it, let's get this working exactly how you want it! Since you're already using jQuery and Bootstrap, we can hook into the dropdown click events to update the right-hand button's state and text seamlessly. Here's the step-by-step fix:

Step 1: Refine the HTML (add clear identifiers) #

First, we'll add data-action attributes to your dropdown items to make it easier to detect which option was clicked—this keeps the JavaScript clean and maintainable:

<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="#" data-action="add"><i class="fas fa-plus funds-icons"></i>&nbsp; Add</a>
            <a class="dropdown-item" href="#" data-action="reduce"><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>

Step 2: Add the jQuery Logic #

Now we'll write a script to listen for dropdown clicks and update the button's state/text accordingly:

$(document).ready(function() {
  // Listen for clicks on dropdown items
  $('.add-reduce .dropdown-item').click(function(e) {
    // Stop the default link navigation behavior
    e.preventDefault();
    
    // Get the selected action type and target the right-hand button
    const selectedAction = $(this).data('action');
    const $actionButton = $('.add-reduce-div .input-group-append .btn');
    
    if (selectedAction === 'add') {
      // Set button to "Add" and enable it
      $actionButton.text('Add').prop('disabled', false);
    } else if (selectedAction === 'reduce') {
      // Switch button to "Reduce" and ensure it's enabled
      $actionButton.text('Reduce').prop('disabled', false);
    }
  });
});

How this works: #

• Default State: The "Add" button starts disabled, which matches your initial requirement.
• When selecting "+ Add": The button text stays "Add", but we remove the disabled property so it becomes clickable.
• When selecting "- Reduce": We change the button text to "Reduce" and enable it (if you wanted to disable it for this case too, just swap false to true in the prop call).

You can easily extend this logic—for example, clearing the input field when switching options, or adding input validation before enabling the button—by adding extra lines inside the click handler!

内容的提问来源于stack exchange，提问作者BillNathan