0
votes

Comment faire que ces boutons agissent comme une entrée radio

J'ai besoin d'un de ces boutons pour être sélectionné avant de continuer, pour afficher la sélection que j'ai utilisée JQuery pour modifier la couleur de la plage en vert. Vous trouverez ci-dessous mon code xxx

script.js xxx

merci

jquery html button selection

2 commentaires

bouton à sélectionner? Il n'y a pas d'option pour sélectionner le bouton

J'essaie d'utiliser un bouton comme entrée radio. Lorsqu'il est sélectionné, chaque bouton sera désactivé, c'est-à-dire qu'un seul bouton doit être sélectionné.

3 Réponses :

0
votes

J'ai fait quelque chose comme ça avec des cases à cocher récemment:

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

0 commentaires

2
votes

Pour obtenir un résultat attendu Utilisez ci-dessous l'option de désactivation des autres boutons

Désactiver tous les boutons en cliquant sur n'importe quel bouton à l'aide de PROP LI>

Activer le bouton Cliquez sur LI> ol>

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

0 commentaires

0
votes

meilleur moyen est xxx

0 commentaires