En el caso #1 de las obras, en el caso #2 no funciona. Compruebe el código de abajo:

<div class="container">
    <div class="row">
        <h1>Radio Group #1</h1>
        <label class="radio-inline">
          <input name="radioGroup" id="radio1" value="option1" type="radio"> 1
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio3" value="option3" type="radio"> 3
        </label>
    </div>
    <div class="row">
        <h1>Radio Group #2</h1>
        <label for="year" class="control-label input-group">Year</label>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input name="year" value="2011" type="radio">2011
            </label>
            <label class="btn btn-default">
                <input name="year" value="2012" type="radio">2012
            </label>
            <label class="btn btn-default">
                <input name="year" value="2013" checked="checked" type="radio">2013
            </label>
        </div>  
    </div>  
</div>

Se puede ver en acción aquí: http://bootply.com/84165

  • Lo que no funciona?
InformationsquelleAutor Khrys | 2013-09-30

4 Comentarios

  1. 77

    Suponiendo que desea un botón por defecto activada.

    <div class="row">
        <h1>Radio Group #2</h1>
        <label for="year" class="control-label input-group">Year</label>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="year" value="2011">2011
            </label>
            <label class="btn btn-default">
                <input type="radio" name="year" value="2012">2012
            </label>
            <label class="btn btn-default active">
                <input type="radio" name="year" value="2013" checked="">2013
            </label>
        </div>
      </div>

    Agregar el active clase para el botón (label etiqueta) desea mora y checked="" a su input etiqueta de manera que se presentó en el formulario por defecto.

    • Gracias @Trevor. El botón se comprueba ahora, pero cuando yo envíe el formulario, no entiendo como equipaje. Si yo manualmente, haga clic en las opciones de otros sin el ‘activo’, el envío puede entender el valor. Con el 2013 activo, si hago clic en 2011, por ejemplo, y haga clic de nuevo en 2013 y presentar la forma en que funciona. ¿Tienes alguna idea? Gracias de nuevo.
    • Se parece a esto: stackoverflow.com/questions/11462434/…
    • Oh, en ese caso, pruebe a añadir el checked="" para el elemento de entrada así. Voy a actualizar mi respuesta.
    • Funciona! Muchas gracias!
    • Gracias por eso, es un verdadero frente-slapper cuando lo leas!
    • Maldita sea! no es obvio.Gracias!
    • Gracias! Una, además de votar por usted y uno abajo para angular del extraño comportamiento…
    • Gracias! Trabajó como un encanto!

  2. 14

    Un javascript fix para aplicar el ‘activo’ de la clase a todas las etiquetas que son los padres de equipaje entradas:

    $(':input:checked').parent('.btn').addClass('active');

    insertar a la derecha después de

    $('.btn').button();
    • Si usted está teniendo problemas con los botones no ser resaltado después de pulsar «Atrás», este fragmento de JavaScript revisiones. Gracias, @rawrkats.
    • Me gusta esta solución es la mejor, pero he utilizado $(".btn-group").find(':input:checked').parent('.btn').addClass('active'); para que se ejecute un toque más rápido en las páginas que no tienen ninguna de estas.
  3. 2

    Tienes que utilizar activo en la etiqueta para que funcione como se mencionó anteriormente. Pero usted puede usar checked=»checked» y también funcionará. No es necesario pero es más legible y más sentido, ya que es más formato html cumplimiento.

  4. 1

    Uso activo clase con etiqueta a hacer auto seleccionar y utilizar checked="" .

       <label class="btn btn-primary  active" value="regular"  style="width:47%">
       <input  type="radio" name="service" checked=""  > Regular </label>
       <label class="btn btn-primary " value="express" style="width:46%">
       <input type="radio" name="service"> Express </label>

Dejar respuesta

Please enter your comment!
Please enter your name here