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

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.

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.

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

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.

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

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

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

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

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

Eu usei isso para alcançar os resultados:

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

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.

onclick="javascript: return false;"

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>

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.

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

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>

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

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/

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>

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

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

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.

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.

Basta usar uma tag desativada simples como esta abaixo.

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

uma idéia alternativa é usar uma sobreposição e encobrir somente sua leitura entradas

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

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.

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.

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.

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>

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

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.

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.