Pregunta ¿Las casillas de verificación de HTML se pueden configurar de forma que solo sean de lectura?


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

Preferiría no usar Deshabilitado, 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.


681
2017-09-30 21:58


origen


Respuestas:


puedes usar esto:

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

Esto funciona porque devolver falso del evento click detiene la cadena de ejecución continuando.


427



READONLY no funciona en casillas de verificación, ya que le impide editar un campo valor, pero con una casilla de verificación en realidad está editando el campo estado (encendido || apagado)

De faqs.org:

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

Si no quieres usar disabled pero 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';
}

379



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

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

Solo agrega disabled="disabled" como un atributo.


Editar para abordar los comentarios:

Si desea que los datos se vuelvan a publicar, 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 forma, cuando la casilla de verificación está configurada como 'deshabilitada', solo sirve para una representación visual de los datos, en lugar de estar '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.


282



<input type="checkbox" onclick="this.checked=!this.checked;">

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


60



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


49



Esto presenta un poco de un problema de usabilidad.

Si desea mostrar una casilla de verificación, pero no permite interactuar, ¿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 manejador de envío de formulario usando javascript que habilite las casillas justo antes de que el formulario sea presentada. 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;
       }
    }
}

44



<input type="checkbox" readonly="readonly" name="..." />

con jquery:

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

aún puede ser una buena idea dar alguna pista visual (css, text, ...), que el control no aceptará entradas.


30



Lo usé para lograr los resultados:

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

16



Me di cuenta de la solución dada a continuación. Encontré mi investigación para el mismo problema. Yo no lo publiqué, pero no fue hecho por mí. Utiliza jQuery:

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

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


12



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

6



onclick="javascript: return false;"

6