La liaison radio les boutons et le texte des entrées

Vous ne pouvez pas utiliser un seul <label> élément de l'étiquette de deux entrées séparées. Je suggère d'associer les étiquettes pour les boutons de la radio, depuis le bouton radio est un petit cliquez sur la cible et l'étiquette s'étend de la cible.

Choisissez l'une des radios pour être sélectionné par défaut, peut-être "$". Désactiver le champ de texte par défaut:

<div class="row-fluid control-group">
  <div class="span7 pull-left">
    <label class="radio" for="discount-dollars">
      <input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
      &#36; Off
    </label>
    <div class="input-append">
      <input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
      <span class="add-on">.00</span>
    </div>
  </div><!-- .span7 .pull-left -->

  <div class="span5">
    <label class="radio" for="discount-percent">
      <input type="radio" name="discount" id="discount-percent" value="percent">
      &#37; Off
    </label>
    <input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
  </div>
</div><!-- .row-fluid .control-group -->

Puis utiliser jQuery pour faire quelque chose comme ceci:

$(function (){
  $("#discount-dollars, #discount-percent").click(function (){

    //get the value of this radio button ("dollars" or "percent")
    var value = $(this).val();

    //find all text fields...
    $(this).closest(".control-group").find("input[type=text]")

      //...and disable them...
      .attr("disabled", "disabled")                     

    //...then find the text field whose class name matches
    //the value of this radio button ("dollars" or "percent")...
    .end().find("." + value)

      //...and enable that text field
      .removeAttr("disabled")          
    .end();
  });
});

Fondamentalement, ce qui est à l'écoute de click événements sur les deux boutons radio. Lorsque vous cliquez sur une radio, il permet à ses associés de champ de texte (c'est à dire, le champ de texte avec un nom de classe CSS correspondant à la valeur du bouton radio) et désactive l'autre champ de texte. De cette façon, vous ne pouvez pas saisir de texte dans l'autre champ de texte, à moins que ses associés bouton radio est coché.

OriginalL'auteur Brandan

Vous ne pouvez pas se concentrer sur deux éléments, le champ de saisie de texte ou le bouton radio.
Mais vous devez utiliser JavaScript ou jQuery, lorsque vous cliquez sur le bouton radio pour se concentrer sur le champ ci-dessous, ou lorsque vous entrez une valeur dans le champ ci-dessous pour vérifier le radio bouton ci-dessus.

Cela peut vous aider si vous souhaitez utiliser jquery : http://api.jquery.com/val/ et http://api.jquery.com/focus/

OriginalL'auteur Boris

jQuery est ce que vous voulez. En supposant que vos éléments avaient Id comme suit:

• $ bouton radio: argent-radio
• $ texte de la boîte: argent-texte
• % bouton radio: de un pour cent de la radio
• % zone de texte: pourcentage de texte

...le code pourrait ressembler à quelque chose comme ça. Cela va prendre soin de désactiver les zones de texte et la focalisation de l'entrée correctement.

<form>
    <table>
        <tr>
            <td>
                <input type="radio" id="money-radio" name="unit" value="money" />
                <label for="money-radio">$ Off</label>
            </td>
            <td>
                <input type="radio" id="percent-radio" name="unit" value="percent" />
                <label for="percent-radio">% Off</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="money-text" name="money-off" />
            </td>
            <td>
                <input type="text" id="percent-text" name="percent-off" />
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    $(function() {
        $('#percent-radio, #money-radio').change(function() {
            if ($('#percent-radio').val() == true) {
                $('#percent-text').removeAttr('disabled').focus();
            } else {
                $('#percent-text').attr('disabled', 'disabled');
            }

            if ($('#money-radio').val() == true) {
                $('#money-text').removeAttr('disabled').focus();
            } else {
                $('#money-text').attr('disabled', 'disabled');
            }
        }).change();
    });
</script>

OriginalL'auteur Zenexer