时间戳

首页 > 解决方案 > 如果选择了任何选项按钮，如何添加活动类？

javascript - 如果选择了任何选项按钮，如何添加活动类？

问题描述

如果选择了按钮组中的任何选项，我正在尝试将活动类添加到提交按钮。由于某种原因，我无法使其工作。

https://jsfiddle.net/75ybncud

$('#optionbutton1').on('click', function(e) {
  $('#submitbutton').prop('aria-disabled', false);
  $('#submitbutton').removeAttr('disabled');
  $('#submitbutton').addClass('active');
});

$('#optionbutton2').on('click', function(e) {
  $('#submitbutton').prop('aria-disabled', false);
  $('#submitbutton').removeAttr('disabled');
  $('#submitbutton').addClass('active');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="btn-group list-group" role="group" id="fabricList">
    <button type="button" class="list-group-item list-group-item-action" id="optionbutton1">
      <div class="row">
        <p class="font-weight-bold col-sm-2">Option 1</p>
      </div>
    </button>
    <button type="button" class="list-group-item list-group-item-action" id="optionbutton2">
      <div class="row">
        <p class="font-weight-bold col-sm-2">Option 2</p>
      </div>
    </button>
  </div>
  <div class="row my-4 mx-auto">
    <a class="btn btn-info mr-auto ml-3 disabled" href="#select-color" id="submitbutton">Submit</a>
  </div>
</div>

标签： javascripthtmljquerybootstrap-4

解决方案

您必须disabled使用.removeClass()not 属性删除类，因为它是按钮上的类。

这是引导程序中禁用<button>/<a>标记的类：

$('#optionbutton1').on('click', function(e) {
  $('#submitbutton').prop('aria-disabled', false);
  $('#submitbutton').removeClass('disabled');
  $('#submitbutton').addClass('active');
});

$('#optionbutton2').on('click', function(e) {
  $('#submitbutton').prop('aria-disabled', false);
  $('#submitbutton').removeClass('disabled');
  $('#submitbutton').addClass('active');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="btn-group list-group" role="group" id="fabricList">
    <button type="button" class="list-group-item list-group-item-action" id="optionbutton1">
      <div class="row">
        <p class="font-weight-bold col-sm-2">Option 1</p>
      </div>
    </button>
    <button type="button" class="list-group-item list-group-item-action" id="optionbutton2">
      <div class="row">
        <p class="font-weight-bold col-sm-2">Option 2</p>
      </div>
    </button>
  </div>
  <div class="row my-4 mx-auto">
    <a class="btn btn-info mr-auto ml-3 disabled" href="#select-color" id="submitbutton">Submit</a>
  </div>
</div>

推荐阅读