Estoy tratando de usar el Twitter Bootstrap botón de grupo como un conjunto de formulario controles de entrada. Por defecto, estos botones se pueden formar grupos para que funcione como un botón de opción o grupo de casillas de verificación, pero desde que uso el <button> elemento, que en realidad no puede ser utilizado como un botón de opción o casilla de verificación.

En mi investigación, he encontrado este sitio que utiliza CSS para que estos bootstrap botones en realidad el control de los botones de radio y casillas de verificación. El único problema es que el uso más reciente de las características de CSS para trabajar, y por lo tanto, requieren IE9 o superior para funcionar.

Me gustaría extender el soporte a IE8. Hay otro (tal vez JS controlada) solución que le ofrecen las mismas características que el enlace de arriba sin la empinada CSS requisitos?

Gracias por su tiempo.

  • ¿a qué te refieres they cannot actually be used like a radio button or checkbox.? Su Radio demo sólo permite ser «activada»
  • Si intenta enviar el contenido del formulario a un servidor, ya que no son reales, botones de radio o las casillas de verificación, su selección no va a ser enviado al servidor para su procesamiento.
  • ¿has visto mi respuesta?
InformationsquelleAutor Oliver Spryn | 2013-03-12

5 Comentarios

  1. 134

    Bootstrap 3 tiene un «nativo» solución…

    Hay ahora es un «verdadero» Bootstrap solución para este problema, que parece funcionar bien también en los navegadores más antiguos. Aquí es lo que parece:

    JS:

    //get selection
    $('.colors input[type=radio]').on('change', function() {
        console.log(this.value);
    });

    HTML:

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <div class="btn-group colors" data-toggle="buttons">
      <label class="btn btn-primary active">
        <input type="radio" name="options" value="red" autocomplete="off" checked> Red
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" value="orange" autocomplete="off"> Orange
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
      </label>
    </div>
    
    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    Ver la correspondiente documentación de Bootstrap para obtener más información.

    Bootstrap 4

    Bootstrap 4 soporta componente de la misma manera como Bootstrap 3, pero Bootstrap 4 no apoyo IE9. Usted puede ser que desee comprobar hacia fuera el Bootstrap IE8 proyecto.

    • He tenido muchos problemas con este código en producción porque a veces el valor se deja en blanco en el lado del servidor de «opciones» aún cuando la opción predeterminada está activada. Todo se reduce al hecho de que la entrada a veces no obtener el atributo checked o el mal de entrada se obtiene el atributo checked. Yo estoy completamente en una pérdida en cuanto a la reproducibilidad del error, pero la base de datos no mienten.
    • cuando el botón se utiliza, el estado activo de la btn no coincide con el estado de activación de la entrada. Hice esto para compensar: $(‘:input:checked’).padres’.btn’).addClass(‘active’).hermanos().removeClass(«active»);
    • Hay algunos grandes problemas con esto, tratando de usar la Ficha y, a continuación, la barra espaciadora para alternar entre las entradas. Estos cambios no Publicar cuando el formulario es enviado. Bootstrap 3.3.5 ha solucionado este problema. Pensé en hacerle saber a la gente para que no pierda horas de tiempo tratando de solucionarlo. Esto está en revisión #16226, en inglés y #16404.
  2. 23

    Bootstrap 2

    Intentar este violín

    HTML:

    <div class="btn-group" data-toggle="buttons-radio">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>
    <input type="hidden" id="buttonvalue"/>

    Guión:

    $(".btn-group button").click(function () {
        $("#buttonvalue").val($(this).text());
    });

    a continuación, obtener buttonvalue lado del servidor

    • enlace roto @Eon
  3. 4

    Con Bootstrap 3.2 poner la entrada ocultos en medio de su grupo de botones de contenedor. En lugar del contenido del texto tomamos el valor de th datos de campo de valor.

    <div id="test" class="btn-group checkit" data-toggle="buttons-radio">
        <button type="button" data-value="1" class="btn btn-default active">Yes</button>
        <input type='hidden' name="testfield" value='1'>
        <button type="button" data-value="0" class="btn btn-default ">No</button>
    </div>

    Ahora insertar un pequeño fragmento de código javascript en el onload parte de su plantilla.

    $('.checkit .btn').click(function() {
        $(this).parent().find('input').val($(this).data("value"));
    });

    Lo que sólo se necesita agregar .checkit a su grupo de botón e inserte un oculto campo de entrada.

    Con bootstrap 3.2 usted puede utilizar el botón de grupos directamente con la radio o checkbox-entradas

    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" name="options" id="option1" value="1" /> Yes
        </label>
        <label class="btn btn-default">
            <input type="radio" name="options" id="option2" value="0" /> No
        </label>
        <label class="btn btn-default">
            <input type="radio" name="options" id="option3" value="42" /> Whatever
        </label>
    </div>

    Ver aquí:
    http://jsfiddle.net/DHoeschen/gmxr45hh/1/

  4. 0

    Puede utilizar oculta los elementos del formulario y javascript para utilizar el estado del botón para activar el formulario de elemento de los estados.

    • Cierto, me preguntaba si alguien ya había tenido cuidado de que.
  5. 0

    CSS-la única solución:

    HTML:

    <div class="btn-group">
        <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
        <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
    </div>

    SECS/MENOS:

     label.btn {
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
    
        span {
          display: block;
          padding: 10px 15px;
        }
    
        input[type=checkbox] {
          display: none;
        }
    
        input:checked + span {
          display: block;
          color: #fff;
          background-color: #285e8e;
        }
      }

    JSfiddle aquí

Dejar respuesta

Please enter your comment!
Please enter your name here