Как я могу добавить активный класс, если выбраны какие-либо кнопки Option?

Question

Я пытаюсь добавить активный класс к кнопке «Отправить», если выбран любой из параметров из группы кнопок. По какой-то причине я не могу заставить его работать.

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>

Answer 1

Вам необходимо удалить класс disabled, используя атрибут .removeClass() not, поскольку это класс на вашей кнопке.

Это класс в bootstrap, который отключает <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>