Question

在继续之前，我需要选择以下按钮之一，以显示所选的按钮，我已使用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'});

    });
});

谢谢

Answer 1

要获得预期结果，请使用以下禁用其他按钮的选项

使用道具在单击任何按钮时禁用所有按钮
启用点击按钮

$(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

Answer 2

我最近在复选框中做了这样的事情：

  <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)"/>

Answer 3

最好的方法是

$(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'});

    });
});

如何使这些按钮充当无线电输入

3 个答案: