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

【问题标题】：How to do I make these buttons act as a radio input如何使这些按钮充当无线电输入
【发布时间】：2019-02-21 07:57:44
【问题描述】：

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

    });
});

谢谢

【问题讨论】：

按钮被选中？没有选择按钮的选项
我正在尝试使用按钮作为单选输入。选中后，其他所有按钮都将被禁用，即只能选择一个按钮。

标签： jquery html button selection

【解决方案1】：

为了达到预期的效果，请使用以下禁用其他按钮的选项

使用 prop 单击任何按钮时禁用所有按钮
启用点击按钮

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

【讨论】：

【解决方案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)"/>

【讨论】：

【解决方案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'});

    });
});

【讨论】：