0

tengo esta parte del código de un formulario de reservas:

   <select name="time" required>
                              <option value="">Reservar hora</option>
                                 <option value="9:00-10:00">09:00 - 10:00</option>
                                <option value="10:15-11:15">10:15 - 11:15</option>
                                <option value="11:30-12:30">11:30 - 12:30</option>
                                <option value="12:45-13:45">12:45 - 13:45</option>
                                <option value="13:00-14:00">14:00 - 15:00</option>
                                <option value="14:00-15:00">15:15 - 16:15</option>
                                <option value="16:30-17:30">16:30 - 17:30</option>
                                <option value="17:45-18:45">17:45 - 18:45</option>
                            </select> 

Mi pregunta es ¿Cómo podría desactivar por ejemplo la opción 16:30 - 17:30? De manera que porque ese horario esta ocupado ya por un cliente, el usuario no pueda enviar el formulario. Gracias y un saludo

Solución Gracias por la información y enlace y he encontrado: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup He incluido el elemento optgroup y ahi pongo la fecha de reserva y el formulario no se puede enviar.

<select name="time" required>
                                <option value="">Reservar hora</option>
                            <option value="16:30-17:30">16:30 - 17:30</option>
                            <optgroup label="Reservada: 22/5 17:45 - 18:45">
                                <option value="">17:45 - 18:45</option>
                                 <option value="19:00-20:00">19:00 - 20:00</option>
                            </select> 

Es lo que estaba buscando, esa día y hora no se puede enviar. Gracias y un saludo

4
  • Usa el atributo disabled en el option necesario. Esto lo puedes controlar por programación con PHP.
    – aeportugal
    el 26 may. a las 17:33
  • 3
    Pero optgroup no es para desactivar una opción, sino para crear grupos de opciones y lo que pones ahí dentro sería como el título de ese grupo. Si se trata de desactivar una o más de las opciones tienes que usar disabled, como te comenta @aeportugal. Además, usar optgroup no te servirá en contextos dinámicos donde el option podría ser activado si se libera.
    – A. Cedano
    el 26 may. a las 22:48
  • Las respuesta deben ir como respuesta, se que te dijeron que no lo era en un comentario pero esa persona cometió un error.
    – Yussef
    el 27 may. a las 2:39
  • Lo que había puesto no tenia el mismo formato de la edición que hizo, no daba a entender que lo tenia resuelto. Al final si hubiese editado esa respuesta y le colocase que de esa forma había solventado su problema no habría confusión o con solo marcarla como aceptada habría bastado.
    – OCHOA
    el 27 may. a las 7:54

1 respuesta 1

2

Responderé solo porque has generado una confusión en el asunto.

Para desactivar un option basta con agregar el atributo disabled y nada más

<option value="16:30-17:30" disabled>16:30 - 17:30</option>

Ejemplo

<select name="time" required>
    <option value="">Reservar hora</option>
    <option value="9:00-10:00">09:00 - 10:00</option>
    <option value="10:15-11:15">10:15 - 11:15</option>
    <option value="11:30-12:30">11:30 - 12:30</option>
    <option value="12:45-13:45">12:45 - 13:45</option>
    <option value="13:00-14:00">14:00 - 15:00</option>
    <option value="14:00-15:00">15:15 - 16:15</option>
    <option value="16:30-17:30" disabled>16:30 - 17:30</option>
    <option value="17:45-18:45">17:45 - 18:45</option>
</select> 

El optgroup es para agrupar opciones, y claro como se agrega un titulo no seleccionable a dicha agrupación tu piensas que está desactivado.

Por ejemplo podríamos agrupas los horarios en Mañana y Tarde

<select name="time" required>
  <option disabled selected>Reservar hora</option>
  <optgroup label="Mañana"> 
    <option value="9:00-10:00">09:00 - 10:00</option>
    <option value="10:15-11:15">10:15 - 11:15</option>
    <option value="11:30-12:30">11:30 - 12:30</option>
  </optgroup>
  <optgroup label="Tarde"> 
    <option value="12:45-13:45">12:45 - 13:45</option>
    <option value="13:00-14:00">14:00 - 15:00</option>
    <option value="14:00-15:00">15:15 - 16:15</option>
    <option value="16:30-17:30" disabled>16:30 - 17:30</option>
    <option value="17:45-18:45">17:45 - 18:45</option>
  </optgroup>
</select>

Si te fijas la primera opción también le he colocado disabled, habitualmente se hace esto con el option que funciona de titulo del select ya que este no cuenta con placeholder como los input

1
  • Silnceramente cuando puse en primera instancia el elemento optgroup, no se algo me decía que no era optimo, pero al estar la opción inactiva me valía. No obstante te agradezco Yussef tus aclaraciones y la puesta en escena del código. Se ve mucho más profesional.
    – Jhon
    el 27 may. a las 9:18

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.