html - bootstrap - select disabled javascript

¿Cómo hacer que el elemento html<select> parezca "deshabilitado", pero pase los valores?

Question

Cuando estoy desactivando un

<select name="sel" disabled>
    <option>123</option>
</select>

elemento, no pasa su variable.

¿Qué hacer para verlo como deshabilitado, pero estar en estado "normal"?

Esto se debe a que tengo una lista de "selecciones", y algunas veces algunas tienen un valor único, por lo que el usuario debe comprender que solo tiene un valor sin hacer clic en él.

Answer 1

Agregue una clase .disabled y use este CSS :

​.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}​

Demostración: http://jsfiddle.net/ZCSRq/

Answer 2

Mi solución fue crear una clase deshabilitada en CSS:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

y luego su selección sería:

<select name="sel" class="disabled">
    <option>123</option>
</select>

El usuario no podría elegir ningún valor, pero el valor de selección se transmitirá al enviar el formulario.

Answer 3

Puede mantenerlo deshabilitado como desee y luego eliminar el atributo deshabilitado antes de enviar el formulario.

$(''#myForm'').submit(function() {
    $(''select'').removeAttr(''disabled'');
});

Tenga en cuenta que si confía en este método, también querrá deshabilitarlo programáticamente, porque si JS está deshabilitado o no es compatible, se bloqueará la selección deshabilitada.

$(document).ready(function() {
    $(''select'').attr(''disabled'', ''disabled'');
});

Answer 4

Se podría usar un elemento de entrada oculto adicional con el mismo nombre y valor que el de la lista de inhabilitados. Esto asegurará que el valor se pase en las variables $ _POST.

P.ej:

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

Answer 5

Si puede proporcionar un valor predeterminado para sus selecciones, puede usar el mismo enfoque para las casillas de verificación no marcadas que requieren una entrada oculta antes del elemento real, ya que estos no publican un valor si no se seleccionan:

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

Esto realmente publicará el valor "predeterminado" (sin comillas, obviamente) si la selección está deshabilitada por javascript (o jQuery) o incluso si su código escribe el html deshabilitando el elemento en sí con el atributo: disabled = "disabled".

Answer 6

Wow, tuve el mismo problema, pero una línea de código resolvió mi problema. escribí

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

Envío el formulario a un script php y luego imprime el valor correcto para cada opción mientras era "nulo".

Dime si esto funciona. Me pregunto si esto solo funciona en el mío de alguna manera.

Answer 7

si no desea agregar el attr deshabilitado puede hacerlo mediante programación

puede deshabilitar la edición en el elemento <select class="yourClass"> con este código:

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", ''select.yourClass'', function (event) {
    var $selectDiabled = jQuery(this).attr(''disabled'', ''disabled'');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

si quieres probar, puedes verlo aquí: https://jsfiddle.net/9kjqjLyq/

Answer 8

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>   

o puedes usar jQuery

$("#test option:not(:selected)").prop("disabled", true);