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

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?

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

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

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

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

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.

<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.

crear una clase css, por ejemplo:

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

aplicar esta clase en lugar del atributo deshabilitado

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/

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);

});

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">

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.

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();'>

Añadir onsubmit="this['*nameofyourcheckbox*'].disabled=false"al formulario.

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

<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

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

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

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

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

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.

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.