Tengo una input como type="time" cuando el usuario hace clic para seleccionar una hora, me gustaría deshabilitar algunas de las marcas de tiempo, por ejemplo, 8:30 y 10:30 para que se deshabiliten y el usuario no pueda elegirlas. Preferiblemente con JavaScript o css si es posible.

¿Alguna idea de cómo hacerlo?

 <form action="/action_page.php"> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> <input type="submit" value="Submit"> </form>

Editado:

Después de recibir una sugerencia con este enlace , decidí usar <dataList> como se muestra a continuación, cuando deshabilito la opción, desaparecen de la lista lo que no es adecuado para mi caso.

¿Alguna sugerencia de por qué desaparece en lugar de deshabilitarse?

 <input type="time" id="appt" name="appt" list="time-list"> <datalist id="time-list" > <option id="08" name="08" value="08:30" datatype="time" disabled> <option id="09" name="09" value="09:30" datatype="time" > <option id="10" name="10" value="10:30" datatype="time"> <option id="11" name="11" value="11:30" datatype="time" disabled> <option id="13" name="13" value="13:30" datatype="time" > <option id="20" name="20" value="20:30" datatype="time"> </datalist>