¿Se pueden configurar las casillas de verificación HTML como de solo lectura?

818

Pensé que podrían estar, pero como no estoy poniendo mi dinero donde estaba mi boca (por así decirlo), establecer el atributo de solo lectura en realidad no parece hacer nada.

Prefiero no usar Disabled, ya que quiero que las casillas marcadas se envíen con el resto del formulario, simplemente no quiero que el cliente pueda cambiarlas bajo ciertas circunstancias.

Electrones_Ahoy
fuente
39
Un cliente (malicioso) siempre puede cambiar el valor de una casilla de verificación (o enviar solicitudes arbitrarias). ¡Siempre asegúrese de hacer una validación adecuada del lado del servidor!
knittl
44
@knittl Pero un visitante normal no tiene un cliente (malicioso). Y un Vistor normal no quería cambiar una información (ese es el sentido de readonly)
Christian Gollhardt
3
@knittl Parece que descartas todo el sentido de readonly! ¿Por qué entonces este atributo existiría?
Izhar Aazmi
10
@IzharAazmi: readonlyes solo un atributo del lado del cliente para ayudar a un navegador a representar correctamente un sitio y luego construir la solicitud correcta a partir de él. El servidor no puede ni debe saber sobre el readonlyatributo de la página representada. Debe asumir que la solicitud vino de cualquier parte (y posiblemente con intenciones maliciosas); nunca confíe en la entrada proporcionada por el usuario. Aún así, ¿por qué enviar el valor de una casilla de verificación que no se puede editar en una solicitud (si se establece el valor antes de la representación, que ya conoce el valor cuando la solicitud se presentó, por lo que no hay necesidad de transmitirlo en la solicitud)
knittl
44
@knittl Estoy de acuerdo! Pero ves que el readonlyatributo existe allí por alguna razón. Ciertamente no tiene nada que ver con la implementación del lado del servidor. Pero está ahí para decirle al usuario "¡Oye! Se asume este valor aquí, y / pero no puedes cambiar esto".
Izhar Aazmi

Respuestas:

539

puedes usar esto:

<input type="checkbox" onclick="return false;"/>

Esto funciona porque devolver falso desde el evento de clic detiene la continuación de la cadena de ejecución.

Yanni
fuente
29
Devolver false en javascript evita continuar la cadena de ejecución para el controlador de clic o clave. No tiene nada que ver con el estado de la casilla de verificación
Jessica Brown
99
PD ... si desea que la casilla de verificación esté en el estado marcado, debe agregarla checked="checked", no meterse con el javascript. El javascript está ahí para forzar que los clics del mouse sean ignorados en el objeto de entrada, no para establecer el estado de la casilla de verificación.
Jessica Brown
8
No hay indicación visual del estado de r / o en este caso.
Jesse Glick
11
Sin embargo, evita el uso de TAB para navegar a la siguiente entrada.
user327961
77
¡Falla completamente si javascript está deshabilitado!
Doin
420

READONLYno funciona en casillas de verificación, ya que le impide editar el valor de un campo , pero con una casilla de verificación está editando el estado del campo (activado || desactivado)

Desde faqs.org :

Es importante comprender que READONLY simplemente evita que el usuario cambie el valor del campo, no que interactúe con el campo. En las casillas de verificación, por ejemplo, puede activarlas o desactivarlas (configurando así el estado COMPROBADO) pero no cambia el valor del campo.

Si no desea usar disabledpero aún desea enviar el valor, ¿qué le parece enviar el valor como un campo oculto e imprimir su contenido al usuario cuando no cumple con los criterios de edición? p.ej

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}
ConroyP
fuente
135
Funciona, pero es un poco ... bien sucio, solo las casillas de verificación deberían hacer lo que la intuición dice.
levhita
8
La intuición nos engaña, como explicó ConroyP.
ANeves
120
La intuición no engaña a EE. UU., Engañó a los que implementaron la casilla de verificación de esta manera.
Califf
@ConroyP -> "le impide editar el valor de un campo, pero con una casilla de verificación está editando el estado del campo (activado || desactivado)". Esa es una justificación realmente débil para una decisión descabellada. El 'estado' y el 'valor' son, para la mayoría de nosotros, muy parecidos a 'toMAYto' y 'toMAHto', como se puede ver en los votos a favor de las personas que no están de acuerdo.
McAuley
343

Esta es una casilla de verificación que no puede cambiar:

<input type="checkbox" disabled="disabled" checked="checked">

Simplemente agregue disabled="disabled"como un atributo.


Editar para abordar los comentarios:

Si desea que los datos se vuelvan a publicar, entonces una solución simple es aplicar el mismo nombre a una entrada oculta:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

De esta manera, cuando la casilla de verificación está configurada como 'deshabilitada', solo sirve para una representación visual de los datos, en lugar de estar realmente 'vinculada' a los datos. En la publicación posterior, el valor de la entrada oculta se envía cuando la casilla de verificación está desactivada.

Silvermind
fuente
331
Tenga en cuenta que la casilla de verificación "deshabilitado" no envía valor a través de datos POST.
biphobe
66
@powtac No logras indicar que quiere que se publiquen los datos, tu ejemplo no hace eso.
David Mårtensson
70
No hay forma de que esta respuesta tenga 105 votos a favor. Va en contra de todo lo que dice el OP.
JM4
15
@nathanhayfield: según esa lógica, debería poder publicar respuestas útiles sobre cualquier tema y obtener votos a favor. :(
Michael Bray
24
@MichaelBray Supongo que esto recibe muchos votos positivos porque mucha gente quiere saber cómo hacer que las casillas de verificación sean de solo lectura para que hagan esto: 1) Google "Casilla de verificación de solo lectura". 2) Vea que el título de esta pregunta coincide con lo que quieren hacer y haga clic en él. 3) Desplácese hacia abajo hasta que encuentren esta respuesta. 4) Felicidad y voto a favor.
Mark Byers
63
<input type="checkbox" onclick="this.checked=!this.checked;">

Pero absolutamente DEBE validar los datos en el servidor para asegurarse de que no se hayan cambiado.

Grant Wagner
fuente
44
Encontré que esta es la mejor solución; Además, puedo llamar a otra pieza de código (por ejemplo, algo de jquery-stuff) para mostrar un pequeño cartel que dice "no puedes cambiar esto hasta que hagas x". Entonces algo como: "... onclick = 'this.checked =! This.checked; javascript: theCheckboxWasClicked ();' ..."
Bane
Esto no atenúa las casillas como con la respuesta de powtac, así que obtuvo mi voto
EHarpham
Esto es un poco hack, pero es un pequeño truco ingenioso, perfecto, casi elegante.
Russell
Mejor solución. Debe marcarse como la respuesta correcta.
Scottie
3
Como se indicó anteriormente, esto no funciona al hacer doble clic en IE. Yo solía: onchange = "this.checked = true;"
Ritikesh
57

otra "solución simple":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled = "disabled" / disabled = true

summsel
fuente
1
Esto resuelve todos los problemas: crea una casilla de verificación de solo lectura, envía datos POST y proporciona una indicación visual de solo lectura (en contraste con todas las soluciones de JavaScript)
Dalibor Frivaldsky
2
también podría dejar namey valueatributos de su caja ficticia, también ="checked"y ="diabled"los valores de atributo podrían dejarse. w3.org/TR/html-markup/input.checkbox.html
Sampo Sarrala - codidact.org
Lo más importante es que esta solución es HTML antiguo y no depende de Javascript.
GlennG
45

Esto presenta un problema de usabilidad.

Si desea mostrar una casilla de verificación, pero no dejar que interactúe con ella, ¿por qué incluso una casilla de verificación?

Sin embargo, mi enfoque sería usar deshabilitado (el usuario espera que una casilla deshabilitada no sea editable, en lugar de usar JS para hacer que una habilitada no funcione), y agregar un controlador de envío de formulario usando javascript que habilite las casillas de verificación justo antes de que el formulario esté presentado. De esta manera, usted obtiene sus valores publicados.

es decir, algo como esto:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}
FlySwat
fuente
22
Otra opción es mostrar la casilla de verificación deshabilitada (o una imagen o cualquier cosa para denotar marcada / desmarcada) y tener una entrada oculta que es lo que procesa el servidor.
Juan Mendes
55
No es un problema de usabilidad cuando obtienes una forma en la que parte de tu decisión afecta a otras entradas (también conocido como: establecer un valor que no se puede tocar si no deshaces tu primera acción). Odio cuando las personas intentan cambiar la opinión de las personas en lugar de responder (esto no se trata de ti @FlySwat, respondiste).
Pherrymason
77
El propósito es usar una casilla de verificación como campo de visualización "este valor es verdadero", que es más fácil de escanear una tabla que un grupo de "verdadero" / "falso". Claro, podría usar un ícono pero, en una forma, las casillas de verificación parecen estar allí, listas para usar.
Olie
1
Generalmente uso esta solución pero ... a veces los usuarios, especialmente en conexiones lentas, ven los botones de entrada habilitados después del envío del formulario y deciden jugar con él.
sistempuntoout
2
Suponga que tiene una serie de "características" que se pueden incluir o no, por lo que tiene una plantilla que muestra una casilla de verificación en la característica. Pero a veces, una característica es un requisito previo para otra cosa ... por lo que DEBE incluirse, pero no desea cambiar su plantilla. Para eso es exactamente una casilla de verificación deshabilitada / marcada. Han existido desde siempre, así que espero que la pregunta "por qué incluso una casilla de verificación" sea retórica.
Triynko
38
<input type="checkbox" readonly="readonly" name="..." />

con jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

aún podría ser una buena idea dar alguna pista visual (css, texto, ...), de que el control no aceptará entradas.

ene.
fuente
Esto no funcionó en ie6 para mí, el filtro de atributo de solo lectura no funciona correctamente. Lo saqué del filtro y puse el atributo check en el cuerpo de la función y funciona bien en ie6.
gt124
3
Usé "data-readonly = true" en lugar del atributo estándar y funciona bien en todos los navegadores. Me gusta más esta solución que las otras anteriores +1
peipst9lker
1
El selector debe ser $(':checkbox[readonly]')para seleccionar todas las casillas de verificación candidatas ya que el readonlyvalor del atributo es opcional.
Izhar Aazmi
21

Usé esto para lograr los resultados:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
Osama Javed
fuente
En mi caso, esto funciona sin punto y coma, de lo contrario no lo hace.
Mwiza
12

Me di cuenta de la solución dada a continuación. En encontré mi investigación para el mismo problema. No sé quién lo había publicado, pero no fue hecho por mí. Utiliza jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

Esto haría que las casillas de verificación fueran de solo lectura, lo que sería útil para mostrar datos de solo lectura al cliente.

El cálculo de Gotham
fuente
1
La pregunta solicita una casilla de verificación de solo lectura y no una desactivada. Entonces esta es la respuesta más correcta.
NileshChauhan
9
onclick="javascript: return false;"
Sandman
fuente
Hmmm ... esto está funcionando para el caso falso / desmarcado, pero onclick="javascript: return true;"solo hace que actúe como una casilla de verificación normal. Consejos? ¡Gracias!
Olie
@Olie, agrega checkedatributo y mantenlo falseen su lugar.
Qwertiy
7

Respuesta tardía, pero la mayoría de las respuestas parecen complicarla demasiado.

Según tengo entendido, el OP básicamente quería:

  1. Casilla de solo lectura para mostrar el estado.
  2. Valor devuelto con forma.

Se debe notar que:

  1. El OP prefirió no usar el disabled atributo, porque "quieren que las casillas marcadas se envíen con el resto del formulario".
  2. Las casillas de verificación no marcadas no se envían con el formulario, ya que la cita del OP en 1. arriba indica que ya lo sabían. Básicamente, el valor de la casilla de verificación solo existe si está marcado.
  3. Una casilla de verificación deshabilitada indica claramente que no se puede cambiar, por diseño, por lo que es poco probable que un usuario intente cambiarla.
  4. El valor de una casilla de verificación no se limita a indicar su estado, como yeso false, sino que puede ser cualquier texto.

Por lo tanto, dado que el readonlyatributo no funciona, la mejor solución, que no requiere JavaScript, es:

  1. Una casilla de verificación deshabilitada, sin nombre ni valor.
  2. Si la casilla de verificación se va a mostrar como marcada, un campo oculto con el nombre y el valor almacenados en el servidor.

Entonces, para una casilla marcada:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Para una casilla de verificación sin marcar:

<input type="checkbox" disabled="disabled" />

El principal problema con las entradas deshabilitadas, especialmente las casillas de verificación, es su bajo contraste, que puede ser un problema para algunas personas con ciertas discapacidades visuales. Puede ser mejor indicar un valor con palabras simples, como Status: noneo Status: implemented, pero incluyendo la entrada oculta anterior cuando se usa esta última, como:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Patanjali
fuente
7

La mayoría de las respuestas actuales tienen uno o más de estos problemas:

  1. Solo verifique el mouse, no el teclado.
  2. Verificar solo en la carga de la página.
  3. Enganche el cambio cada vez más popular o envíe eventos que no siempre funcionarán si algo más los tiene enganchados.
  4. Requerir una entrada oculta u otros elementos / atributos especiales que tenga que deshacer para volver a habilitar la casilla de verificación usando javascript.

Lo siguiente es simple y no tiene ninguno de esos problemas.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Si la casilla de verificación es de solo lectura, no cambiará. Si no es así, lo hará. Utiliza jquery, pero probablemente ya lo estés usando ...

Funciona.

little_birdie
fuente
6
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
pollodiablo
fuente
6

Si desea que se envíen al servidor con el formulario pero no interaccionen al usuario, puede usarlo pointer-events: noneen css ( funciona en todos los navegadores modernos excepto IE10- y Opera 12- ) y configurar el índice de tabulación  -1para evitar cambios a través del teclado. También tenga en cuenta que no puede usar la labeletiqueta ya que hacer clic en ella cambiará el estado de todos modos.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}
<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

Qwertiy
fuente
Permítanme repetir su última oración (me la perdí y perdí un tiempo precioso): su técnica es inútil si hay <label> (en Firefox funciona perfectamente, en realidad. El problema es con Chrome).
Niccolo M.
@NiccoloM., Pero si sabe que es de solo lectura, ¿por qué envolverlo en la etiqueta? También puede poner una etiqueta después y usar el foratributo. En ese caso puedes usar input[type="checkbox"][readonly] + label { pointer-events: none !important; }.
Qwertiy
@KevinBui, ¿has eliminado labely agregado tabindex? ¿Cómo establece el foco en el elemento desenfocable para presionar un espacio en él?
Qwertiy
5

<input type="checkbox" onclick="return false" /> funcionará para ti, estoy usando esto

Rinto George
fuente
5

Algunas de las respuestas aquí parecen un poco indirectas, pero aquí hay un pequeño truco.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>

entonces en jquery puedes elegir una de dos opciones:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

demostración: http://jsfiddle.net/5WFYt/

sksallaj
fuente
3
¿Y esto no es una "rotonda"?
KoZm0kNoT
no, es bastante directo ... simplemente no es conciso.
sksallaj
4

Sobre la base de las respuestas anteriores, si usa jQuery, esta puede ser una buena solución para todas las entradas:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Estoy usando esto con Asp.Net MVC para configurar algunos elementos de formulario de solo lectura. Lo anterior funciona para texto y casillas de verificación configurando cualquier contenedor principal como .readonly como en los siguientes escenarios:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
Derrick
fuente
4
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
frag
fuente
4

Sé que "deshabilitado" no es una respuesta aceptable, ya que el operador quiere que se publique. Sin embargo, siempre tendrá que validar los valores en el lado del servidor INCLUSO si tiene configurada la opción de solo lectura. Esto se debe a que no puede evitar que un usuario malintencionado publique valores utilizando el atributo de solo lectura.

Sugiero almacenar el valor original (lado del servidor) y configurarlo en deshabilitado. Luego, cuando envían el formulario, ignore los valores publicados y tome los valores originales que almacenó.

Se verá y se comportará como si fuera un valor de solo lectura. Y maneja (ignora) las publicaciones de usuarios malintencionados. Estás matando 2 pájaros de un tiro.

NL3294
fuente
3

Hubiera comentado la respuesta de ConroyP, pero eso requiere 50 reputación que no tengo. Tengo suficiente reputación para publicar otra respuesta. Lo siento.

El problema con la respuesta de ConroyP es que la casilla de verificación se vuelve inmutable ni siquiera la incluye en la página. Aunque Electrons_Ahoy no estipula tanto, la mejor respuesta sería una en la que la casilla de verificación inmutable sería similar, si no la misma, que la casilla de verificación cambiable, como es el caso cuando se aplica el atributo "deshabilitado". Una solución que aborde las dos razones que Electrons_Ahoy da para no querer usar el atributo "deshabilitado" no lo haría necesariamente inválido porque utilizó el atributo "deshabilitado".

Suponga dos variables booleanas, $ check y $ disabled:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

La casilla de verificación se muestra como marcada si $ check es verdadero. La casilla de verificación se muestra como desmarcada si $ marcado es falso. El usuario puede cambiar el estado de la casilla de verificación si y solo si $ disabled es falso. El parámetro "my_name" no se publica cuando la casilla de verificación no está marcada, por el usuario o no. El parámetro "my_name = 1" se publica cuando la casilla de verificación está marcada, por el usuario o no. Creo que esto es lo que Electrons_Ahoy estaba buscando.

revs David N. Jafferian
fuente
3

No, las casillas de entrada no pueden ser de solo lectura.

¡Pero puedes hacerlos de solo lectura con javascript!

Agregue este código en cualquier lugar en cualquier momento para que las casillas de verificación solo funcionen como se supone, evitando que el usuario lo modifique de alguna manera.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});
input[type=checkbox][readonly] {
    cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Puede agregar este script en cualquier momento después de que jQuery se haya cargado.

Funcionará para elementos agregados dinámicamente.

Funciona seleccionando el evento de clic (que ocurre antes del evento de cambio) en cualquier elemento de la página, luego verifica si este elemento es una casilla de verificación de solo lectura, y si lo es, bloquea el cambio.

Hay tantos ifs para que no afecte el rendimiento de la página.

Timo Huovinen
fuente
3

Simplemente use una etiqueta deshabilitada simple como esta a continuación.

<input type="checkbox" name="email"  disabled>
Nirbhay Rana
fuente
66
"Etiqueta deshabilitada" no enviará estos datos
Przemysław Kaczmarczyk
2

Si desea que TODAS sus casillas de verificación estén "bloqueadas" para que el usuario no pueda cambiar el estado "marcado" si está presente el atributo "solo lectura", puede usar jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Lo bueno de este código es que le permite cambiar el atributo "solo lectura" en todo el código sin tener que volver a vincular cada casilla de verificación.

Funciona también para botones de radio.

Daniel Ribeiro
fuente
1

La razón principal por la que las personas desean una casilla de verificación de solo lectura y (también) un grupo de radio de solo lectura es para que la información que no se puede cambiar se pueda presentar al usuario en el formulario en que se ingresó.

OK deshabilitado hará esto; desafortunadamente, los controles deshabilitados no se pueden navegar con el teclado y, por lo tanto, no cumplen con todas las leyes de accesibilidad. Este es el mayor bloqueo en HTML que conozco.

Tim
fuente
1

Contribuyendo muy muy tarde ... pero de todos modos. Al cargar la página, use jquery para deshabilitar todas las casillas de verificación, excepto la seleccionada actualmente. Luego configure el seleccionado actualmente como solo lectura para que tenga un aspecto similar al de los deshabilitados. El usuario no puede cambiar el valor, y el valor seleccionado aún se envía.

Jason
fuente
1

Muy tarde a la fiesta, pero encontré una respuesta para MVC (5) deshabilité CheckBox y agregué un HiddenFor ANTES de la casilla de verificación, por lo que cuando se publica, encuentra primero el campo Oculto y usa ese valor. Esto funciona

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>
Bowlturner
fuente
1

Usaría el atributo de solo lectura

<input type="checkbox" readonly>

Luego use CSS para deshabilitar las interacciones:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Tenga en cuenta que usar la pseudoclase: solo lectura no funciona aquí.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}
gordie
fuente
0

Simplemente no quiero que el cliente pueda cambiarlos bajo ciertas circunstancias.

READONLY en sí mismo no funcionará. Es posible que pueda hacer algo funky con CSS, pero generalmente los desactivamos.

ADVERTENCIA: si se publican de nuevo, el cliente puede cambiarlos, punto. No puede confiar en solo lectura para evitar que un usuario cambie algo. El siempre podría usar el violinista o simplemente cambiar el html con firebug o algo así.

Walden Leverich
fuente
Tiene toda la razón, es por eso que también verifico eso en el lado del servidor, configurar esto es solo para mejorar la experiencia del usuario en el lado del cliente.
levhita
0

Mi solución es en realidad lo opuesto a la solución de FlySwat, pero no estoy seguro de si funcionará para su situación. Tengo un grupo de casillas de verificación, y cada una tiene un controlador onClick que envía el formulario (se utilizan para cambiar la configuración del filtro de una tabla). No quiero permitir múltiples clics, ya que los clics posteriores después del primero se ignoran. Entonces deshabilito todas las casillas de verificación después del primer clic y después de enviar el formulario:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Las casillas de verificación están en un elemento span con un ID de "filtros": la segunda parte del código es una instrucción jQuery que recorre las casillas de verificación y deshabilita cada una de ellas. De esta forma, los valores de las casillas de verificación aún se envían a través del formulario (ya que el formulario se envió antes de deshabilitarlos), y evita que el usuario los cambie hasta que la página se vuelva a cargar.

sk.
fuente