Bloquear elemento select con jQuery

Bloquear elemento select con jQuery

En este tutorial aprenderemos cómo bloquear y desbloquear las opciones de un elemento select utilizando jQuery.

Método para bloquear todas las opciones

<!-- Campo de tipo select -->
<select class="select-field">
    <option value="1">Francisco</option>
    <option value="2">Eduardo</option>
    <option value="3">Javier</option>
</select>
<script>
    // Método para bloquear y desbloquear
    function lockSelectOptions(select, lock) {
        select.find('option').each(function () {
            $(this).attr('disabled', lock);
        });
    }
    // Llamamos al método para bloquear
    lockSelectOptions($(".select-field"), true);
    // Llamamos al método para desbloquear
    lockSelectOptions($(".select-field"), false);
</script>

Hay que tener en cuenta que si el select tiene algúna opción seleccionada, el método anterior puede dar problemas. Si intentamos acceder al select para obtener la opción seleccionada cuando está bloqueado no devolverá el resultado correcto.

Este problema lo podremos solucionar de la siguiente forma.

Método para bloquear todas las opciones menos la seleccionada

<!-- Campo de tipo select -->
<select class="select-field">
    <option value="1" selected="selected">Francisco</option>
    <option value="2">Eduardo</option>
    <option value="3">Javier</option>
</select>
<script>
    // Método para bloquear y desbloquear
    function lockSelectOptions(select, lock) {
        select.find('option').each(function () {
            if (!this.selected || !lock) {
            $(this).attr('disabled', lock);
        }
        });
    }
    // Llamamos al método para bloquear
    lockSelectOptions($(".select-field"), true);
    // Llamamos al método para desbloquear
    lockSelectOptions($(".select-field"), false);
</script>

De esta manera nos aseguramos de que si queremos obtener la opción seleccionada no vamos a tener problemas, ya que el bloqueo sólo afecta a las demás.

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo