seleção - html title attribute




Caixas de seleção HTML podem ser definidas como somente leitura? (20)

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

READONLY em si não vai funcionar. Você pode ser capaz de fazer algo funky w / CSS, mas geralmente apenas torná-los desativados.

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

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

Eu prefiro não usar o Disabled, 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.


A principal razão pela qual as pessoas gostariam de 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 ao usuário na forma em que foram digitadas.

OK desativado fará isso - infelizmente, os controles desativados não são navegáveis ​​pelo teclado e, portanto, violam toda a legislação de acessibilidade. Este é o MAIOR desligamento em HTML que eu conheço.


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

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

Em seguida, 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();
    });

});

Detalhes

demonstração: http://jsfiddle.net/5WFYt/


Ao enviar o formulário, nós realmente passamos o valor da caixa de seleção, não o estado (marcado / desmarcado). O atributo Readonly nos impede de editar o valor, mas não o estado. Se você quiser ter um campo somente leitura que representará o valor que deseja enviar, use o texto somente leitura.


Com base nas respostas acima, se estiver usando o jQuery, isso 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>

Eu estou usando isso com Asp.Net MVC para definir alguns elementos de formulário somente leitura. O acima funciona para texto e caixas de seleção, definindo qualquer contêiner pai como .readonly como os 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>

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


Eu sei que "desativado" não é uma resposta aceitável, já que o op quer que ele seja postado. No entanto, você sempre terá que validar os 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 registre valores usando o atributo readonly.

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

Ele vai parecer e se comportar como se fosse um valor de leitura. E lida com (ignora) posts de usuários mal-intencionados. Você está matando 2 pássaros com uma pedra.


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

O problema com a resposta de ConroyP é que a caixa de seleção é imutável por não incluí-lo na página. Embora Electrons_Ahoy não estipule o mesmo, a melhor resposta seria aquela em que a caixa de seleção imutável seria semelhante, se não a mesma, à caixa de seleção alterável, como é o caso quando o atributo "disabled" é aplicado. Uma solução que aborde as duas razões que a Electrons_Ahoy dá para não querer usar o atributo "disabled" não seria necessariamente inválida porque utilizou o atributo "disabled".

Suponha duas variáveis ​​booleanas, $ checked 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 $ checked for true. A caixa de seleção é exibida como desmarcada se $ checked for falso. O usuário pode alterar o estado da caixa de seleção se, e somente se, $ disabled for false. O parâmetro "my_name" não é postado quando a caixa de seleção está desmarcada, pelo usuário ou não. O parâmetro "my_name = 1" é postado quando a caixa de seleção é marcada, pelo usuário ou não. Eu acredito que isso é o que a Electrons_Ahoy estava procurando.


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é mesmo uma caixa de seleção?

No entanto, minha abordagem seria usar desabilitado (o usuário espera que uma caixa de seleção desabilitada não seja editável, em vez de usar JS para que um habilitado não funcione) e adicione um manipulador de envio de formulário usando javascript que habilita caixas de seleção imediatamente antes do formulário submetido. Dessa forma, você obtém seus valores publicados.

ou seja, algo parecido com 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;
       }
    }
}

Minha solução é, na verdade, o oposto da solução da FlySwat, mas não tenho certeza se isso funcionará para 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 para uma tabela). Não quero permitir vários cliques, pois os cliques subsequentes após o primeiro são ignorados. Por isso, desativo 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 span 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 delas. 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 impede que o usuário os altere até que a página seja recarregada.


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

Mas você pode torná-los readonly com javascript!

Adicione este código em qualquer lugar, a qualquer momento, para fazer com que as caixas de seleção só funcionem como pressuposto, impedindo que o usuário o 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 este script a qualquer momento depois que o jQuery for carregado.

Ele funcionará para elementos adicionados dinamicamente.

Ele funciona pegando o evento click (que acontece antes do evento change) em qualquer elemento da página, então verifica se esse elemento é uma caixa de seleção readonly e, se estiver, bloqueia a alteração.

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


Se alguém mais estiver usando o MVC e um modelo de editor, é assim que controlo a exibição de uma propriedade somente leitura (uso um atributo personalizado para obter o valor na instrução if)

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

Se você quiser que TODAS as caixas de seleção sejam "bloqueadas" para que o usuário não possa alterar o estado "marcado" se o atributo "somente leitura" estiver presente, então você pode usar 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 "readonly" em todo o seu código sem precisar reativar todas as caixas de seleção.

Funciona também para botões de rádio.


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


você pode usar isto:

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

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


<input type="checkbox" onclick="return false" /> funcionará para você, estou usando este


onclick="javascript: return false;"

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

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

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


<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, ...), que o controle não aceitará entradas.







checkbox