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

checkbox html5

Question

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

Prefiero no utilizar Deshabilitado, ya que quiero que las casillas de verificación marcadas se envíen con el resto del formulario, simplemente no quiero que el cliente pueda cambiarlas en determinadas circunstancias.

Answer 1

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

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

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

Answer 2

Al enviar el formulario, en realidad pasamos el valor de la casilla de verificación, no el estado (marcado / sin marcar). El atributo de solo lectura nos impide editar el valor, pero no el estado. Si desea tener un campo de solo lectura que represente el valor que desea enviar, use el texto de solo lectura.

Answer 3

Al publicar una casilla de verificación HTML en el servidor, tiene un valor de cadena de ''on'' o ''''.

Solo lectura no detiene al usuario que edita la casilla de verificación, y deshabilitado detiene el valor que se devuelve.
Una forma de evitar esto es tener un elemento oculto para almacenar el valor real y la casilla de verificación mostrada es un dummy que está deshabilitado. De esta manera, el estado de la casilla de verificación se mantiene entre las publicaciones.

Aquí hay una función para hacer esto. Utiliza una cadena de ''T'' o ''F'' y puedes cambiar esto de la forma que quieras. Esto se ha utilizado en una página ASP utilizando el script VB del lado del servidor.

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type=''hidden'' id=''" & i_strName & "'' name=''" & i_strName & "'' " & _
        "value=''" & i_strChecked_TorF & "''>" & _
    "<input type=''checkbox'' disabled id=''" & i_strName & "Dummy'' name=''" & i_strName & "Dummy'' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

En la parte superior de una página ASP puede recoger el valor persistente ...

strDataValue = GetCheckbox(Request.Form("chkTest"))

y cuando quieras mostrar tu casilla de verificación, puedes hacer esto ...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

He probado esto y funciona bien. Tampoco se basa en JavaScript.

Answer 4

Algunas de las respuestas aquí parecen un poco rotundas, 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>​

Luego, en jQuery puede elegir una de las 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();
    });

});

Al aire libre

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

Answer 5

Contribuyendo muy tarde ... pero de todos modos. En la carga de 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.

Answer 6

En HTML antiguo puedes usar

<input type="checkbox" disabled checked>text

pero en realidad no se recomienda usar simplemente HTML antiguo, ahora debería usar XHTML.

En XHTML bien formado tienes que usar

<input type="checkbox" disabled="disabled" checked="checked" />text <!-- if yu have a checked box-->
<input type="checkbox" disabled="disabled" />text <!-- if you have a unchecked box -->

XHTML bien formado requiere un formulario XML, esa es la razón para usar disabled = "disabled" en lugar de simplemente usar disabled.

Answer 7

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

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

Solo agregue 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 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á deshabilitada.

Answer 8

Esto presenta un poco de un problema de usabilidad.

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

Sin embargo, mi enfoque sería utilizar deshabilitado (el usuario espera que una casilla de verificación deshabilitada no sea editable, en lugar de usar JS para 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 se complete el formulario. 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;
       }
    }
}

Answer 9

Habría comentado sobre la respuesta de ConroyP, pero eso requiere una reputación de 50 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 invariable al no incluirla en la página. Aunque Electrons_Ahoy no lo estipula tanto, la mejor respuesta sería una en la que la casilla de verificación inmutable se vería similar, si no la misma que la casilla de verificación modificable, como es el caso cuando se aplica el atributo "deshabilitado". Una solución que aborde las dos razones por las que Electrons_Ahoy da por no querer usar el atributo "deshabilitado" no sería necesariamente inválida porque utilizó el atributo "deshabilitado".

Supongamos dos variables booleanas, $ marcadas y $ deshabilitadas:

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 $ marcada es verdadera. La casilla de verificación se muestra como desactivada si $ marcada es falsa. El usuario puede cambiar el estado de la casilla de verificación si y solo si $ desactivado es falso. El parámetro "my_name" no se publica cuando la casilla de verificación está desactivada, ya sea por el usuario o no. El parámetro "my_name = 1" se publica cuando el cuadro está marcado, ya sea por el usuario o no. Creo que esto es lo que estaba buscando Electrons_Ahoy.

Answer 10

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

Aceptar desactivado hará esto: desafortunadamente, los controles desactivados no son navegables por el teclado y, por lo tanto, no cumplen con todas las leyes de accesibilidad. Este es el cuelgue MÁS GRANDE en HTML que conozco.

Answer 11

Me di cuenta de la solución dada a continuación. En lo encontré mi investigación por el mismo tema. 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 sean de solo lectura, lo que sería útil para mostrar datos de solo lectura al cliente.

Answer 12

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 usan para cambiar la configuración del filtro de una tabla). No quiero permitir varios clics, ya que los clics posteriores después de los primeros se ignoran. Así que 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 se encuentran en un elemento span con un ID de "filtros"; la segunda parte del código es una declaración jQuery que recorre las casillas de verificación y las desactiva. De esta manera, los valores de la casilla de verificación aún se envían a través del formulario (ya que el formulario se envió antes de deshabilitarlos), e impide que el usuario los cambie hasta que la página se vuelva a cargar.

Answer 13

Muy tarde para la fiesta, pero encontré una respuesta para MVC (5) Deshabilité el CheckBox y agregué un HiddenFor ANTES de la casilla de verificación, así que cuando se está publicando, primero se encuentra el campo Oculto y se 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>

Answer 14

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

¡Pero puedes hacerlos solo con javascript!

Agregue este código en cualquier lugar y en cualquier momento para hacer que las casillas de verificación funcionen como si se supusiera, evitando que el usuario lo modifique de cualquier 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 añadidos dinámicamente.

Funciona recogiendo 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, entonces bloquea el cambio.

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

Answer 15

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

Answer 16

Sé que "deshabilitado" no es una respuesta aceptable, ya que la operadora quiere que se publique. Sin embargo, siempre tendrá que validar los valores en el lado AÚN del servidor si tiene configurada la opción de solo lectura. Esto se debe a que no puede impedir 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.

Answer 17

Si alguien más está usando MVC y una plantilla de editor, así es como controlo la visualización de una propiedad de solo lectura (uso un atributo personalizado para obtener el valor en la declaración if)

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}

Answer 18

Si necesita que la casilla de verificación se envíe con el formulario, pero en realidad sea de solo lectura para el usuario, le recomiendo que se deshabilite y use javascript para volver a habilitarlos cuando se envíe el formulario.

Esto es por dos razones. Primero y más importante, sus usuarios se benefician al ver una diferencia visible entre las casillas de verificación que pueden cambiar y las casillas de verificación que son de solo lectura. Discapacitado hace esto.

La segunda razón es que el estado deshabilitado está integrado en el navegador, por lo que necesita menos código para ejecutar cuando el usuario hace clic en algo. Esta es probablemente una preferencia más personal que cualquier otra cosa. Aún necesitará algo de javascript para deshabilitarlos cuando envíe el formulario.

Me parece más fácil usar algún javascript cuando se envía el formulario para deshabilitar las casillas de verificación que para usar una entrada oculta para llevar el valor.

Answer 19

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 establecer algunos elementos de formulario de solo lectura. Lo anterior funciona para el texto y las 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>

Answer 20

Utilicé esto para lograr los resultados:

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

Answer 21

puedes usar esto:

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

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

Answer 22

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

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

Answer 23

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

Answer 24

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

Desde faqs.org :

Es importante entender 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 utilizar disabled pero aún desea enviar el valor, ¿qué le parece enviar el valor como un campo oculto y simplemente imprimir el 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'';
}

Answer 25

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

Answer 26

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

Answer 27

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

Answer 28

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

con jquery:

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

Todavía podría ser una buena idea dar alguna sugerencia visual (css, texto, ...), de que el control no acepte entradas.

Answer 29

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

Answer 30

onclick="javascript: return false;"