¿Cómo enviar / enviar una casilla de verificación de entrada que está desactivada?


130

Tengo una casilla de verificación que, en determinadas condiciones, debe deshabilitarse. Resulta que HTTP no publica entradas deshabilitadas.

¿Cómo puedo evitar eso? enviar la entrada incluso si está deshabilitada y mantener la entrada deshabilitada?


Creo que esta solución también ayuda aquí: stackoverflow.com/questions/12769664/…
Sergej Fomin

Creo que esta solución también ayuda aquí: stackoverflow.com/questions/12769664/…
Sergej Fomin

Respuestas:


106

ACTUALIZACIÓN : READONLYno funciona en casillas de verificación

Podría usar, disabled="disabled"pero en este punto el valor de la casilla de verificación no aparecerá en los POSTvalores. Una de las estrategias es agregar un campo oculto que contenga el valor de la casilla de verificación dentro del mismo formulario y leer el valor desde ese campo

Simplemente cambie disabledareadonly


77
Para que sea HTML válido, establezca específicamente el valor de readonly en readonly, es decir:<input name="foo" value="bar" readonly="readonly" />
Matt Huggins

55
Para que el campo de entrada "readonly" se vea como el campo "deshabilitado", establezca 'style = "color: grey; background-color: # F0F0F0;"'.
Dan Nissenbaum

3
@MattHuggins El valor de configuración para los atributos de nombre de atributo único como marcado, de solo lectura, etc. ... y la barra diagonal en los atributos que no son pares no tiene nada que ver con la validez de HTML: estos son necesarios para la validez de XHTML ...
jave.web

Por cierto: Quizás tropiece con alguien sobre esto: NO LO USE para el tipo de entrada = botón, no se "deshabilitarán", use "disabled = 'disabled'"
Meister Schnitzel

2
readonlyno funcionará, ya que no podrá publicar el valor de una casilla de verificación con dicha etiqueta, use disabledjunto con el elemento de entrada oculto para mantener el valor de la casilla de verificación, vea cómo: stackoverflow.com/a/8274787/448816
mikhail-t

91

He resuelto ese problema.

Como la readonly="readonly"etiqueta no funciona (he probado diferentes navegadores), debes usarla disabled="disabled" en su lugar. Pero el valor de su casilla de verificación no se publicará entonces ...

Aquí está mi solución:

Para obtener una apariencia de "solo lectura" y el valor de casilla de verificación POST al mismo tiempo, simplemente agregue una "entrada" oculta con el mismo nombre y valor que su casilla de verificación . Debe mantenerlo junto a su casilla de verificación o entre las mismas <form></form>etiquetas:

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

Además, ¡solo para que lo sepan readonly="readonly", readonly="true", readonly="",o simplemente READONLYNO lo resolverán! ¡He pasado algunas horas para resolverlo!

Esta referencia tampoco es relevante (puede que aún no sea, o ya no, no tengo idea): http://www.w3schools.com/tags/att_input_readonly.asp


¿Debe haber los mismos identificadores para las entradas ocultas y de casilla de verificación?
user2167382

No, Id puede ser lo que sea, pero 'nombre' y 'valor' deben ser los mismos.
mikhail-t

¿Qué tan confiable es esto en varios navegadores?
Tim

esto se probó y funcionó bien en los últimos Chrome, Firefox e IE 11, aquí hay una implementación, pruébelo en su navegador: mvccbl.com/…
mikhail-t

74

Si está satisfecho con JQuery, elimine el atributo deshabilitado cuando envíe el formulario:

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

¿Esto hará que el control esté "habilitado" en la interfaz de usuario?
anar khalilov

Elimina el atributo deshabilitado, así que en teoría sí. En la práctica, no creo que el usuario pueda alterar el campo a través de la interfaz de usuario entre esto y el formulario que se envía ... Me interesaría saberlo con certeza.
Tristan Channing el

Un poco viejo, pero como nota al margen: si usa <select>u <textfield>otros elementos HTML que admiten el disabledatributo, puede seleccionarlos y habilitarlos todos con: $( "*:disabled" ).removeAttr("disabled");
Gusstavv Gil

10

Puede manejarlo de esta manera ... Para cada casilla de verificación, cree un campo oculto con el mismo nameatributo. Pero establezca el valor de ese campo oculto con algún valor predeterminado con el que pueda probar. Por ejemplo..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

Si la casilla de verificación está "marcada" cuando se envía el formulario, entonces el valor de ese parámetro del formulario será

"agree,false"

Si la casilla de verificación no está marcada, el valor sería

"false"

Puede usar cualquier valor en lugar de "falso", pero se entiende la idea.


55
¿No lo odias cuando escribes una solución complicada a un problema y luego, cuando actualizas, alguien (como Francesco) va y escribe una simple frase? ;)
jessegavin

Esto es perfecto para lo que estoy tratando de lograr, quiero que la casilla sin marcar envíe un valor en lugar de nada, gracias: D.
Geoffrey

@jessegavin Dado que su 'simple one liner' ya no funciona y ha actualizado su respuesta para incluir la suya, no, no puedo decir que sí.
RyanfaeScotland

8
<input type="checkbox" checked="checked" onclick="this.checked=true" />

Comencé con el problema: "¿cómo enviar / enviar una casilla de verificación de entrada que está deshabilitada?" y en mi respuesta omití el comentario: "Si queremos deshabilitar una casilla de verificación, seguramente debemos mantener un valor prefijado (marcado o desmarcado) y también queremos que el usuario lo sepa (de lo contrario, deberíamos usar un tipo oculto y no es una casilla de verificación) ". En mi respuesta supuse que queríamos mantener siempre marcada una casilla de verificación y ese código funciona de esta manera. Si hacemos clic en esa casilla de verificación, se verificará para siempre y su valor será PUBLICADO / Enviado. De la misma manera, si escribo onclick = "this.checked = false" sin marcado = "marcado" (nota: el valor predeterminado no está marcado) estará sin marcar para siempre y su valor no será PUBLICADO / Enviado.


esto simplemente duplicará lo que la casilla de verificación ya hace, pero si ha sido deshabilitado por JavaScript o algo así, todavía estará deshabilitado, ¿podría explicar un poco más lo que estaba buscando, tal vez no entiendo ya que es solo una línea de código
ScottC

8

crear una clase css, por ejemplo:

.disable{
        pointer-events: none;
        opacity: 0.5;
}

aplicar esta clase en lugar del atributo deshabilitado


7

La forma más sencilla de hacerlo es:

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

Esto evitará que el usuario pueda anular la selección de esta casilla de verificación y aún así enviará su valor cuando se envíe el formulario. Eliminar marcado si desea que el usuario no pueda seleccionar esta casilla de verificación.

Además, puede usar javascript para borrar el onclick una vez que se cumpla una determinada condición (si eso es lo que busca). Aquí hay un violín sucio que muestra lo que quiero decir. No es perfecto, pero entiendes la esencia.

http://jsfiddle.net/vwUUc/


4

Esto funciona como un encanto:

  1. Eliminar los atributos "deshabilitados"
  2. Envía el formulario
  3. Agregue los atributos nuevamente. La mejor manera de hacer esto es usar una función setTimeOut , por ejemplo, con un retraso de 1 milisegundo.

La única desventaja es el breve parpadeo de los campos de entrada deshabilitados al enviar. ¡Al menos en mi escenario eso no es un gran problema!

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

3

No lo deshabilites; en su lugar, configúrelo como de solo lectura, aunque esto no tiene ningún efecto ya que no permite al usuario cambiar el estado. Pero puede usar jQuery para aplicar esto (evite que el usuario cambie el estado de la casilla de verificación:

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

Esto supone que todas las casillas de verificación que no desea modificar tienen el atributo "solo lectura". p.ej.

<input type="checkbox" readonly="readonly">

¡Gracias por esto! Por alguna razón, la entrada "oculta" no funcionaba para mí. Esto me salvó. Muy buen truco de hecho!
NewbieProgrammer

3

Ya que:

  • establecer el atributo de solo lectura en la casilla de verificación no es válido de acuerdo con la especificación HTML,
  • el uso de elementos ocultos para enviar valor no es muy bonito y
  • configurar JavaScript onclick que impide cambiar el valor tampoco es muy bueno

Te voy a ofrecer otra posibilidad:

Establezca su casilla de verificación como deshabilitada normalmente. Y antes de que el usuario envíe el formulario, active esta casilla de verificación mediante JavaScript.

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

Debido a que la casilla de verificación está habilitada antes de enviar el formulario, su valor se publica de manera común. Lo único que no es muy agradable de esta solución es que esta casilla de verificación se habilita por un tiempo y eso puede ser visto por los usuarios. Pero es solo un detalle con el que puedo vivir.


1

Desafortunadamente no hay una solución 'simple'. El atributo readonly no se puede aplicar a las casillas de verificación. Leí la especificación W3 sobre la casilla de verificación y encontré al culpable:

Si un control no tiene un valor actual cuando se envía el formulario, los agentes de usuario no están obligados a tratarlo como un control exitoso. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Esto hace que el estado no verificado y el estado desactivado den como resultado el mismo valor analizado.

  • readonly = "readonly" no es un atributo válido para casillas de verificación.
  • onclick = "event.preventDefault ();" No siempre es una buena solución, ya que se activa en la casilla de verificación. Pero puede hacer encantos en algunas ocasiones.
  • Habilitar la casilla de verificación onSubmit no es una solución porque el control aún no se trata como un control exitoso, por lo que el valor no se analizará.
  • Agregar otra entrada oculta con el mismo nombre en su HTML no funciona porque el primer valor de control se sobrescribe con el segundo valor de control, ya que tiene el mismo nombre.

La única forma completa de hacer esto es agregar una entrada oculta con el mismo nombre con javascript al enviar el formulario .

Puedes usar el pequeño fragmento que hice para esto:

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

Esto busca el primer formulario en el documento, reúne todas las entradas y busca entradas deshabilitadas. Cuando se encuentra una entrada deshabilitada, se crea una entrada oculta en el ParentNode con el mismo nombre y el valor 'on' (si su estado está 'verificado') y '' (si su estado es '' - no marcado).

Esta función debe ser activada por el evento 'onsubmit' en el elemento FORM como:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>


1

No hay otra opción que no sea un hiddencampo, así que intente usar un hiddencampo como se muestra en el código a continuación:

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

0
<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

La función some_name es un ejemplo de una cláusula anterior para administrar la segunda casilla de verificación que está marcada (publica su valor) o no marcada (no publica su valor) de acuerdo con la cláusula y el usuario no puede modificar su estado; no es necesario gestionar ninguna desactivación de la segunda casilla de verificación


0

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

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

0

Agregar onclick="this.checked=true"Resuelve mi problema:
Ejemplo:

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

0

Aquí hay otra solución que se puede controlar desde el backend.

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

En ASPX.CS

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

La clase solo se agrega con fines de estilo.


0

Acabo de combinar las sugerencias HTML, JS y CSS en las respuestas aquí

HTML:

<input type="checkbox" readonly>

jQuery:

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS:

input[type="checkbox"][readonly] {
  cursor: not-allowed;
  opacity: 0.5;
}

Como el elemento no está 'deshabilitado', todavía pasa por la POST.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.