As caixas de seleção HTML podem ser definidas como somente leitura?

818

Eu pensei que eles poderiam estar, mas como não estou colocando meu dinheiro onde minha boca estava (por assim dizer) definindo o atributo readonly, na verdade, não parece fazer nada.

Prefiro não usar Desativado, pois quero que as caixas de seleção marcadas sejam enviadas com o restante do formulário, mas não quero que o cliente possa alterá-las em determinadas circunstâncias.

Electrons_Ahoy
fonte
39
Um cliente (malicioso) sempre pode alterar o valor de uma caixa de seleção (ou enviar solicitações arbitrárias). Sempre certifique-se de fazer a validação adequada do servidor!
knittl
4
@knittl Mas um vistor normal não tem cliente (malicioso). E uma Vistor normal não deseja alterar a informação (Esse é o sence de readonly)
Christian Gollhardt
3
@knittl Você parece descartar todo o sentido de readonly! Por que então esse atributo existiria!
Izar Aazmi
10
@IzharAazmi: readonlyé apenas um atributo do lado do cliente para ajudar um navegador a renderizar um site corretamente e a construir a solicitação correta a partir dele. O servidor não pode e não deve saber sobre o readonlyatributo da página renderizada. Ele deve assumir que a solicitação veio de qualquer lugar (e possivelmente com intenções maliciosas); nunca confie na entrada fornecida pelo usuário. Ainda assim, por que enviar o valor de uma caixa de seleção que você não pode editar em uma solicitação (se você definir o valor antes da renderização, você já sabe o valor quando a solicitação é enviada, portanto não há necessidade de transmiti-lo na solicitação)
knittl
4
@knittl Concordo! Mas você vê que o readonlyatributo existe lá por algum motivo. Certamente não tem nada a ver com a implementação do servidor. Mas existe para informar ao usuário "Ei! Esse valor está sendo assumido aqui e / mas você não pode alterar isso".
Izar Aazmi

Respostas:

538

você pode usar isso:

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

Isso funciona porque o retorno falso do evento click interrompe a cadeia de execução.

Yanni
fonte
29
Retornar false em javascript impede a continuidade da cadeia de execução do manipulador de cliques ou chaves. Não tem nada a ver com o estado da caixa de seleção
Jessica Brown
9
PS ... se você quiser que a caixa de seleção esteja no estado marcado que você precisa adicionar checked="checked", não mexa no javascript. O javascript está aí apenas para forçar os cliques do mouse a serem ignorados no objeto de entrada, não para definir o estado da caixa de seleção.
Jessica Brown
8
Nenhuma indicação visual do status de r / o neste caso.
Jesse Glick #
11
Impede o uso de TAB para navegar até a próxima entrada.
usar o seguinte comando
7
Falha completamente se o javascript estiver desativado!
Doin 23/06
420

READONLYnão funciona nas caixas de seleção, pois impede que você edite o valor de um campo , mas com uma caixa de seleção você está realmente editando o estado do campo (ativado || desativado)

Do site faqs.org :

É importante entender que READONLY apenas impede o usuário de alterar o valor do campo, não de interagir com o campo. Nas caixas de seleção, por exemplo, você pode ativá-las ou desativá-las (configurando o estado CHECKED), mas não altera o valor do campo.

Se você não deseja usar, disabledmas ainda deseja enviar o valor, que tal enviar o valor como um campo oculto e apenas imprimir seu conteúdo para o usuário quando ele não atender aos critérios de edição? por exemplo

// 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
fonte
135
Funciona, mas é meio que ... bem sujo, só de leitura nas caixas de seleção deve simplesmente fazer o que a intuição diz.
levhita 16/12/08
8
A intuição nos engana, como ConroyP explicou.
ANeves 5/05
120
A intuição não engana os EUA, enganou aqueles que implementaram a caixa de seleção dessa maneira.
Califf
@ConroyP -> "impede que você edite o valor de um campo, mas com uma caixa de seleção você está realmente editando o estado do campo (ativado || desativado)". Essa é uma justificativa muito fraca para uma decisão estúpida. O 'estado' e o 'valor' são, para a maioria de nós, o mesmo que 'toMAYto' e 'toMAHto', como você pode ver pelos votos positivos feitos pelas pessoas que discordam.
McAuley
343

Esta é uma caixa de seleção que você não pode alterar:

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

Basta adicionar disabled="disabled"como um atributo.


Edite para endereçar os comentários:

Se você deseja que os dados sejam postados de volta, uma solução simples é aplicar o mesmo nome a uma entrada oculta:

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

Dessa forma, quando a caixa de seleção estiver definida como 'desativada', ela serve apenas ao propósito de uma representação visual dos dados, em vez de realmente estar 'vinculada' aos dados. Na postagem de retorno, o valor da entrada oculta está sendo enviado quando a caixa de seleção está desabilitada.

Silvermind
fonte
331
Observe que a caixa de seleção "desativado" não envia valor via dados POST.
precisa saber é o seguinte
66
@powtac Você falha em dizer que ele deseja que os dados sejam postados, seu exemplo não faz isso.
David Mårtensson
70
Não há como esta resposta ter 105 votos positivos. Isso vai contra tudo o que o OP afirma.
JM4
15
@nathanhayfield: por essa lógica, eu devo poder postar respostas úteis sobre qualquer tópico e receber votos. :(
Michael Bray
24
@ MichaelBray Suponho que isso receba muitos votos positivos, porque muitas pessoas querem saber como fazer as caixas de seleção somente para leitura, para que façam o seguinte: 1) Google "Checkbox readonly" do Google. 2) Veja que o título desta pergunta corresponde ao que eles querem fazer e clique nele. 3) Role para baixo até encontrarem esta resposta. 4) Felicidade e voto positivo.
precisa
63
<input type="checkbox" onclick="this.checked=!this.checked;">

Mas você absolutamente deve validar os dados no servidor para garantir que não foram alterados.

Grant Wagner
fonte
4
Eu achei que essa era a melhor solução; além disso, posso chamar outro trecho de código (digamos, algumas coisas de jquery) para exibir um pequeno sinal que diz "você não pode mudar isso até fazer x primeiro". Então, algo como: "... onclick = 'this.checked =! This.checked; javascript: theCheckboxWasClicked ();' ..."
Bane
Esta cinza doesnt as caixas como com a resposta de powtac por isso tem o meu voto
EHarpham
Isso é um pouco hackish, mas é um hack engenhoso, perfeito, quase elegante.
russell
Melhor solução. Deve ser marcado como a resposta correta.
Scottie
3
Como afirmado acima, isso não funciona com um clique duplo no IE. Eu usei: onchange = "this.checked = true;"
Ritikesh
57

outra "solução simples":

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

desativado = "desativado" / desativado = verdadeiro

total
fonte
1
Isto resolve todos os problemas: Cria caixa só de leitura, envia dados do POST e fornece uma indicação visual do read-only-dade (em contraste com todos os soluções JavaScript)
Dalibor Frivaldsky
2
você também pode cair fora namee valueatributos de seu manequim-box, também ="checked"e ="diabled"attrib-valores podem ser deixados. w3.org/TR/html-markup/input.checkbox.html
Sampo Sarrala - codidact.org
O mais importante é que esta solução é simples HTML antigo e não depende de Javascript.
GlennG
45

Isso apresenta um pouco de um problema de usabilidade.

Se você deseja exibir uma caixa de seleção, mas não deixá-la interagir, por que até uma caixa de seleção?

No entanto, minha abordagem seria usar desativado (o usuário espera que uma caixa de seleção desativada não seja editável, em vez de usar JS para fazer com que uma ativada não funcione) e adicionar um manipulador de envio de formulário usando javascript que habilite as caixas de seleção imediatamente antes do formulário. submetido. Dessa forma, você obtém seus valores lançados.

ou seja, algo como isto:

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
fonte
22
Outra opção é exibir a caixa de seleção desabilitada (ou uma imagem ou qualquer coisa para denotar marcada / desmarcada) e ter uma entrada oculta que é processada pelo servidor.
Juan Mendes
5
Não é um problema de usabilidade quando você obtém um formulário no qual algumas de suas decisões afetam outras entradas (ou seja: definir um valor que não pode ser tocado se você não desfazer sua primeira ação). Eu odeio quando as pessoas tentam mudar de idéia em vez de responder (isso não é sobre você @FlySwat, você respondeu).
Pherrymason 07/10/10
7
O objetivo é usar uma caixa de seleção como um campo de exibição "esse valor é verdadeiro", que é mais fácil varrer uma tabela do que um monte de "verdadeiro" / "falso" -s. Claro, você pode usar um ícone, mas, de certa forma, as caixas de seleção parecem estar prontas para o uso.
Olie
1
Geralmente uso esta solução, mas .. às vezes os usuários, especialmente em conexão lenta, veem os botões de entrada ativados após o envio do formulário e decidem brincar com ele.
Systempuntoout
2
Suponha que você tenha uma série de "recursos" que podem ser incluídos ou não; portanto, você tem um modelo que mostra uma caixa de seleção no recurso. Mas, às vezes, um recurso é um pré-requisito para outra coisa ... portanto, DEVE ser incluído, mas você não deseja alterar seu modelo. É exatamente para isso que serve uma caixa de seleção desativada / marcada. Eles estão aí desde sempre, então espero que a pergunta "por que até uma caixa de seleção" seja retórica.
Triynko 5/01/16
38
<input type="checkbox" readonly="readonly" name="..." />

com jquery:

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

ainda pode ser uma boa idéia dar uma dica visual (css, texto, ...), de que o controle não aceitará entradas.

jan
fonte
Isso não funcionou no ie6 para mim, o filtro de atributo readonly não funciona corretamente. Tirei isso do filtro e coloquei a verificação de atributo no corpo da função e ela funciona bem no ie6.
gt124
3
Eu usei "data-readonly = true" em vez do atributo padrão e funciona bem em todos os navegadores. Eu gosto desta solução mais do que as outras acima de +1
peipst9lker 26/10/12
1
O seletor deve $(':checkbox[readonly]')marcar todas as caixas de seleção de candidatos, pois o readonlyvalor do atributo é opcional.
Izar Aazmi
21

Eu usei isso para alcançar os resultados:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
Osama Javed
fonte
No meu caso, isso funciona sem ponto e vírgula, caso contrário, não.
Mwiza
12

Por acaso notei a solução dada abaixo. Em achei minha pesquisa para o mesmo problema. Não sei quem o postou, mas não foi feito por mim. Ele usa jQuery:

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

Isso tornaria as caixas de seleção somente leitura, o que seria útil para mostrar dados somente leitura ao cliente.

Gotham's Reckoning
fonte
1
A pergunta pede uma caixa de seleção somente leitura e não uma desativada. Portanto, esta é a resposta mais correta.
NileshChauhan
9
onclick="javascript: return false;"
Sandman
fonte
Hmmm ... isso está funcionando para o caso falso / não verificado, mas onclick="javascript: return true;"apenas faz com que funcione como uma caixa de seleção normal. Dicas? Obrigado!
Olie
@ Oh, adicione checkedatributo e mantenha-o falseno lugar.
Qwertiy 7/06/19
7

Resposta tardia, mas a maioria das respostas parece complicar demais.

Pelo que entendi, o OP estava basicamente querendo:

  1. Caixa de seleção Somente leitura para mostrar o status.
  2. Valor retornado com o formulário.

Note-se que:

  1. O OP preferiu não usar o disabledatributo, porque 'deseja que as caixas de seleção marcadas sejam enviadas com o restante do formulário'.
  2. As caixas de seleção desmarcadas não são enviadas com o formulário, pois a citação do OP em 1. acima indica que eles já sabiam. Basicamente, o valor da caixa de seleção só existe se estiver marcada.
  3. Uma caixa de seleção desabilitada indica claramente que não pode ser alterada por design; portanto, é improvável que o usuário tente alterá-la.
  4. O valor de uma caixa de seleção não se limita a indicar seu status, como yesou false, mas pode ser qualquer texto.

Portanto, como o readonlyatributo não funciona, a melhor solução, sem a necessidade de javascript, é:

  1. Uma caixa de seleção desativada, sem nome ou valor.
  2. Se a caixa de seleção for exibida como marcada, um campo oculto com o nome e o valor armazenados no servidor.

Portanto, para uma caixa de seleção marcada:

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

Para uma caixa de seleção desmarcada:

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

O principal problema com entradas desativadas, especialmente as caixas de seleção, é o baixo contraste que pode ser um problema para alguns com certas deficiências visuais. Pode ser melhor indicar um valor com palavras simples, como Status: noneou Status: implemented, mas incluindo a entrada oculta acima quando a última é usada, como:

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

Patanjali
fonte
7

A maioria das respostas atuais tem um ou mais destes problemas:

  1. Verifique apenas se o mouse não está no teclado.
  2. Verifique apenas no carregamento da página.
  3. Conecte a mudança sempre popular ou envie eventos que nem sempre funcionam, se algo mais os ligar.
  4. Exija uma entrada oculta ou outros elementos / atributos especiais que você precisa desfazer para reativar a caixa de seleção usando javascript.

O seguinte é simples e não apresenta nenhum desses problemas.

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

Se a caixa de seleção for somente leitura, ela não será alterada. Se não for, será. Ele usa jquery, mas você provavelmente já está usando isso ...

Funciona.

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

Se você deseja que eles sejam enviados ao servidor com o formulário, mas não sejam interativos para o usuário, você pode usar o pointer-events: nonecss ( funciona em todos os navegadores modernos, exceto o IE10 e Opera 12 ) e definir o índice de tabulação  -1para evitar alterações via teclado. Observe também que você não pode usar a labeltag, pois clicar nela mudará o estado de qualquer maneira.

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
fonte
Deixe-me repetir sua última frase (perdi e perdi um tempo precioso): sua técnica é inútil se houver <label> (no Firefox funciona perfeitamente, na verdade. O problema é com o Chrome).
Niccolo M.
@ NiccoloM., Mas se você sabe que é somente leitura, por que colocá-lo no rótulo? Além disso, você pode colocar o rótulo após ele e usar o foratributo Nesse caso, você pode usar input[type="checkbox"][readonly] + label { pointer-events: none !important; }.
21419 Qwertiy
@KevinBui, você removeu labele adicionou tabindex? Como você define o foco no elemento fora de foco para pressionar um espaço nele?
precisa saber é o seguinte
5

<input type="checkbox" onclick="return false" /> vai funcionar para você, eu estou usando isso

Rinto George
fonte
5

Algumas das respostas aqui parecem um pouco indiretas, mas aqui está um pequeno truque.

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

então no jquery você pode escolher uma das duas opções:

$(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();
    });

});

O que outras pessoas estão dizendo

demo: http://jsfiddle.net/5WFYt/

sksallaj
fonte
3
E isso não é "rotunda" ??
KoZm0kNoT
nah é bem direto .. só não é conciso.
sksallaj
4

Com base nas respostas acima, se estiver usando jQuery, esta pode ser uma boa solução para todas as 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>

Estou usando isso com o asp.net MVC para definir alguns elementos de formulário somente leitura. O exemplo acima funciona para caixas de texto e de seleção, definindo qualquer contêiner pai como .readonly, como nos seguintes cenários:

<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
fonte
4
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
frag
fonte
4

Eu sei que "desativado" não é uma resposta aceitável, pois o op quer que ele seja publicado. No entanto, você sempre precisará validar valores no lado do servidor, MESMO, se tiver a opção somente leitura definida. Isso ocorre porque você não pode impedir que um usuário mal-intencionado publique valores usando o atributo somente leitura.

Sugiro armazenar o valor original (lado do servidor) e defini-lo como desativado. Em seguida, quando eles enviarem o formulário, ignore os valores postados e leve os valores originais que você armazenou.

Ele parecerá e se comportará como um valor somente leitura. E lida com (ignora) postagens de usuários mal-intencionados. Você está matando 2 coelhos com uma cajadada só.

NL3294
fonte
3

Eu teria comentado a resposta de ConroyP, mas isso requer 50 reputação que eu não tenho. Tenho reputação suficiente para postar outra resposta. Desculpa.

O problema com a resposta da ConroyP é que a caixa de seleção se torna imutável por nem mesmo incluí-la na página. Embora Electrons_Ahoy não estipule tanto, a melhor resposta seria aquela em que a caixa de seleção imutável seria semelhante, se não a mesma que a caixa de seleção mutável, como é o caso quando o atributo "desativado" é aplicado. Uma solução que aborda os dois motivos que a Electrons_Ahoy fornece por não querer usar o atributo "disabled" não seria necessariamente inválida porque utilizava o atributo "disabled".

Suponha duas variáveis ​​booleanas, $ selected e $ 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" ' : '', '/>';

A caixa de seleção é exibida como marcada se $ marcada for verdadeira. A caixa de seleção é exibida como desmarcada se $ marcado for falso. O usuário pode alterar o estado da caixa de seleção se e somente se $ disabled for falso. O parâmetro "my_name" não é publicado quando a caixa de seleção está desmarcada, pelo usuário ou não. O parâmetro "my_name = 1" é publicado quando a caixa de seleção está marcada, pelo usuário ou não. Acredito que é isso que a Electrons_Ahoy estava procurando.

David N. Jafferian
fonte
3

Não, as caixas de seleção de entrada não podem ser apenas de leitura.

Mas você pode torná-los somente leitura com javascript!

Adicione esse código em qualquer lugar e a qualquer momento para fazer com que as caixas de seleção funcionem somente como assumidas, impedindo que o usuário as modifique de qualquer forma.

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>

Você pode adicionar esse script a qualquer momento após o carregamento do jQuery.

Ele funcionará para elementos adicionados dinamicamente.

Ele funciona selecionando o evento click (que ocorre antes do evento de alteração) em qualquer elemento da página e, em seguida, verifica se esse elemento é uma caixa de seleção somente leitura e, se for, bloqueia a alteração.

Existem muitos ifs para não afetar o desempenho da página.

Timo Huovinen
fonte
3

Basta usar uma tag desativada simples como esta abaixo.

<input type="checkbox" name="email"  disabled>
Nirbhay Rana
fonte
6
"Etiqueta desativada" não enviará esses dados
Przemysław Kaczmarczyk
2

Se você deseja que TODAS as suas caixas de seleção estejam "bloqueadas" para que o usuário não possa alterar o estado "marcado" se o atributo "somente leitura" estiver presente, use o jQuery:

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

O legal desse código é que ele permite que você altere o atributo "somente leitura" em todo o seu código sem precisar reativar todas as caixas de seleção.

Também funciona para botões de opção.

Daniel Ribeiro
fonte
1

O principal motivo pelo qual as pessoas desejam uma caixa de seleção somente leitura e (também) um grupo de rádio somente leitura é para que as informações que não podem ser alteradas possam ser apresentadas de volta ao usuário na forma em que foram inseridas.

OK desativado fará isso - infelizmente os controles desativados não podem ser navegados pelo teclado e, portanto, são contrários a toda legislação de acessibilidade. Este é o maior problema em HTML que eu conheço.

Tim
fonte
1

Contribuindo muito, muito tarde ... mas de qualquer maneira. No carregamento da página, use o jquery para desativar todas as caixas de seleção, exceto a selecionada atualmente. Em seguida, defina o selecionado atualmente como somente leitura, para ter uma aparência semelhante à dos desabilitados. O usuário não pode alterar o valor e o valor selecionado ainda é enviado.

Jason
fonte
1

Muito tarde para a festa, mas encontrei uma resposta para o MVC (5), desativei o CheckBox e adicionei um HiddenFor ANTES da caixa de seleção, portanto, quando estiver postando, se encontrar o campo Oculto primeiro e usar esse valor. Isso 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
fonte
1

Eu usaria o atributo readonly

<input type="checkbox" readonly>

Em seguida, use CSS para desativar as interações:

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

Observe que o uso da pseudo-classe: somente leitura não funciona aqui.

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

Só não quero que o cliente possa alterá-los sob certas circunstâncias.

READONLY não funciona. Você pode fazer algo interessante com CSS, mas geralmente os desativamos.

AVISO: Se eles forem postados de volta, o cliente poderá alterá-los, ponto final. Você não pode confiar apenas na leitura para impedir que um usuário altere alguma coisa. O poderia sempre usar violinista ou apenas chane o html w / firebug ou algo assim.

Walden Leverich
fonte
Você está totalmente certo, é por isso que também verifico isso no lado do servidor, definindo isso apenas para melhorar a experiência do usuário no lado do cliente.
levhita 16/12/08
0

Minha solução é realmente o oposto da solução FlySwat, mas não tenho certeza se funcionará para a sua situação. Eu tenho um grupo de caixas de seleção e cada um tem um manipulador onClick que envia o formulário (eles são usados ​​para alterar as configurações de filtro de uma tabela). Não quero permitir vários cliques, pois os cliques subsequentes após o primeiro são ignorados. Desabilito todas as caixas de seleção após o primeiro clique e depois de enviar o formulário:

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

As caixas de seleção estão em um elemento de extensão com um ID de "filtros" - a segunda parte do código é uma instrução jQuery que percorre as caixas de seleção e desativa cada uma. Dessa forma, os valores da caixa de seleção ainda são enviados por meio do formulário (desde que o formulário foi enviado antes de desativá-los) e evitam que o usuário os altere até que a página seja recarregada.

sk.
fonte