3

Tengo un grupo de checkbox, de los cuales se pueden marcar cualquiera de estos, sin embargo ahora necesito que en dos de ellos solo me permita marcar uno..

<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="1" id="cv">
    Ver
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="2" id="ca">
    Ver todos
  </label>
</div>                             
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="3" id="cg">
    Guardar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="4" id="cm">
    Editar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="5" id="ce">
    Eliminar
  </label>
</div>

Dentro de este grupo de checkbox, las opciones de ver - ver todos solo me permita uno de ellos, es decir al seleccionar uno y se desmarque el otro, sin afectar al resto, he estado utilizando jquery pero no he podido lograrlo, ¿alguna idea?

1
  • Tu código hasta ahora?
    – Sr1871
    el 12 dic. 2017 a las 23:30

1 respuesta 1

3

En caso de necesitar que el usuario solo seleccione una opcion entre varias opciones puedes usar el input type="radio" espero sea lo que buscas saludos

Para que el valor de los radios este casado tienen que tener igual la propiedad name y así delimitamos la selección del usuario

Explicación de MDN

Un grupo de radio se define dando a cada uno de los botones de opción del grupo el mismo name. Una vez que se establece un grupo de radio, al seleccionar cualquier botón de radio en ese grupo deselecciona automáticamente cualquier botón de opción actualmente seleccionado en el mismo grupo.


Nota : Las casillas de verificación son similares a los botones de opción, pero con una distinción importante: los botones de opción están diseñados para seleccionar un valor de un conjunto, mientras que las casillas de verificación le permiten activar y desactivar los valores individuales. Donde existen múltiples controles, los botones de radio permiten seleccionar uno de ellos, mientras que las casillas de verificación permiten seleccionar múltiples valores.

fuente:MDN

<div class="radios">
 <label>
    <input type="radio" name="permisos" value="1" id="cv">
    ver
  <label>
  <label>
    <input type="radio" name="permisos" value="2" id="ca">
    ver todos
  </label>

</div>                         
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="3" id="cg">
    Guardar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="4" id="cm">
    Editar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="5" id="ce">
    Eliminar
  </label>
</div>

2
  • Es bueno notar que para que funcione, los input radio deben de tener el mismo nombre.
    – Einer
    el 12 dic. 2017 a las 23:34
  • Tienes toda la razón en este caso ya tenían el name igual el 12 dic. 2017 a las 23:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.