Как сделать, чтобы эти кнопки работали как радиовход - PullRequest
Новая
       9

Как сделать, чтобы эти кнопки работали как радиовход

0 голосов
/ 21 февраля 2019

Мне нужно выбрать одну из этих кнопок перед тем, как продолжить, чтобы показать выбранную. Я использовал jQuery, чтобы изменить цвет диапазона на зеленый.Ниже мой код 

<div class="row">
    <div class="col-md-4 col-md-offset-4">
      <h3 class="page-header">What are registering for ?</h3>
      <div id="btnSelect">
        <div>
          <button data-mode="partnership" class="btn btn-default btn-md btn-block">PARTNERSHIP/ACCREDITED AGENT <span class="fa fa-check fa-2x pull-right" style="color: #e5e5e5;"></span></button>
        </div>
        <br>
        <div>
          <button data-mode="job" class="btn btn-default btn-md btn-block">SEEKING JOB <span class="fa fa-check fa-2x pull-right" style="color: #e5e5e5;"></span> </button>
        </div>
        <br>
        <div>
          <button data-mode="consultancy" class="btn btn-default btn-md btn-block">CONSULTING CLIENT <span class="fa fa-check fa-2x pull-right" style="color: #e5e5e5;"></span></button>
        </div>
        <p class="help-block">Kindly select your choice to continue with your registration.</p>
      </div>
      <hr>
      <div class="btn pull-right btn-sm btn-custom">Proceed <i class="fa fa-chevron-right"></i></div>
    </div>
  </div>

script.js 

$(document).ready(function(){
    $("#btnSelect > div > button").on('click', function(e){
        e.preventDefault();
        selected = false;
        $(this).find('span').addClass('selected').css({'color': 'green'});

    });
});

Спасибо

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

Для достижения ожидаемого результата используйте приведенную ниже опцию отключения других кнопок

  1. Отключение всех кнопок при нажатии любой кнопки с использованием проп
  2. Включение нажатой кнопки 

$(document).ready(function(){
    $("#btnSelect > div > button").on('click', function(e){
        e.preventDefault();
        $('button').prop("disabled", true);
        $(this).prop("disabled", false);

    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-4 col-md-offset-4">
      <h3 class="page-header">What are registering for ?</h3>
      <div id="btnSelect">
        <div>
          <button data-mode="partnership" class="btn btn-default btn-md btn-block">PARTNERSHIP/ACCREDITED AGENT <span class="fa fa-check fa-2x pull-right" style="color: #e5e5e5;"></span></button>
        </div>
        <br>
        <div>
          <button data-mode="job" class="btn btn-default btn-md btn-block">SEEKING JOB <span class="fa fa-check fa-2x pull-right" style="color: #e5e5e5;"></span> </button>
        </div>
        <br>
        <div>
          <button data-mode="consultancy" class="btn btn-default btn-md btn-block">CONSULTING CLIENT <span class="fa fa-check fa-2x pull-right" style="color: #e5e5e5;"></span></button>
        </div>
        <p class="help-block">Kindly select your choice to continue with your registration.</p>
      </div>
      <hr>
      <div class="btn pull-right btn-sm btn-custom">Proceed <i class="fa fa-chevron-right"></i></div>
    </div>
  </div>

codepen - https://codepen.io/nagasai/pen/daLwYa?editors=1010

0 голосов
/ 21 февраля 2019

лучший способ это 

$(document).ready(function(){
    $("#btnSelect > div > button").on('click', function(e){
        e.preventDefault();
        selected = false;
        $('button span').removeClass('selected').css({'color': '#000'});
        $(this).find('span').addClass('selected').css({'color': 'green'});

    });
});
0 голосов
/ 21 февраля 2019

Я недавно сделал что-то подобное с флажками: 

  <script>
    const f = (el) => {
      if (el.checked) {
        document.querySelectorAll('[name=foo]').forEach(e => {if (e !== el) e.checked = false;})
        // document.getElementsByName('foo').forEach(e => {if (e !== el) e.checked = false;})     //alternative
      }
    }
  </script>
  <input type="checkbox" name="foo" onclick="f(this)"/>
  <input type="checkbox" name="foo" onclick="f(this)"/>
  <input type="checkbox" name="foo" onclick="f(this)"/>
...