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

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.

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.

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';
}

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.

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

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

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

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

Usé esto para lograr los resultados:

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

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.

onclick="javascript: return false;"

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>

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.

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

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>

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

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/

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>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

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.

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.

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.

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

<input type="checkbox" name="email"  disabled>

una idea alternativa es usar una superposición y cubrir sus entradas de solo lectura

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

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.

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.

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.

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>

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

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

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.