Eu tenho um select
campo de formulário que quero marcar como "somente leitura", pois o usuário não pode modificar o valor, mas o valor ainda é enviado com o formulário. O uso do disabled
atributo evita que o usuário altere o valor, mas não envia o valor com o formulário.
O readonly
atributo está disponível apenas para input
e textarea
campos, mas é basicamente isso que eu quero. Existe alguma maneira de fazer isso funcionar?
Duas possibilidades que estou considerando incluem:
- Em vez de desabilitar o
select
, desative todos os seoption
use CSS para esmaecer a seleção, para que pareça desabilitada. - Adicione um manipulador de eventos de clique ao botão enviar para ativar todos os menus suspensos desabilitados antes de enviar o formulário.
javascript
html
css
forms
html-select
Marquês Wang
fonte
fonte
trafalmadorian
workest são as melhores. Desativa todas as entradas que não estão selecionadas. Também funcionaria se selecionar várias opções ativadas.$('#toSelect')find(':not(:selected)').prop('disabled',true);
Respostas:
Onde
select_name
está o nome que você normalmente daria ao<select>
.Outra opção.
Agora, com este, notei que, dependendo do servidor da web que você estiver usando, talvez seja necessário
hidden
inserir a entrada antes ou depois do<select>
.Se minha memória me serve corretamente, com o IIS, você o coloca antes, com o Apache, depois. Como sempre, o teste é fundamental.
fonte
Desative os campos e ative-os antes do envio do formulário:
Código jQuery:
fonte
Eu estive procurando uma solução para isso, e desde que eu não encontrei uma solução neste segmento, fiz o meu.
Simples, você apenas desfoca o campo quando se concentra nele, algo como desativá-lo, mas na verdade envia os dados.
fonte
Fui confrontado com um cenário um pouco diferente, pois queria apenas não permitir que o usuário alterasse o valor selecionado com base em uma caixa de seleção anterior. O que acabei fazendo foi desativar todas as outras opções não selecionadas na caixa de seleção usando
fonte
attr
deve mudar comprop
, seria algo parecido com$('#toSelect')find(':not(:selected)').prop('disabled',true);
Mesma solução sugerida por Tres sem usar o jQuery
Isso pode ajudar alguém a entender mais, mas obviamente é menos flexível que o jQuery.
fonte
getElementsByTagName('select')
?se não funcionar com o seletor: input para campos selecionados, use este:
fonte
Eu uso o próximo código para desativar as opções nas seleções
fonte
A maneira mais fácil que encontrei foi criar uma pequena função javascript vinculada ao seu formulário:
e você pode chamá-lo em seu formulário aqui:
Ou você pode chamá-lo na função que você usa para verificar seu formulário :)
fonte
Basta adicionar uma linha antes de enviar.
fonte
Ou use algum JavaScript para alterar o nome do select e defina-o como desativado. Dessa forma, a seleção ainda é enviada, mas usando um nome que você não está verificando.
fonte
Criei um plug-in rápido (apenas no Jquery), que salva o valor em um campo de dados enquanto uma entrada está desativada. Isso significa apenas que enquanto o campo estiver sendo desabilitado programaticamente através do jquery usando .prop () ou .attr () ... o acesso ao valor por .val (), .serialize () ou .serializeArra () sempre retornará o valor valor mesmo se desativado :)
Plugue descarado: https://github.com/Jezternz/jq-disabled-inputs
fonte
Com base na solução do Jordan, criei uma função que cria automaticamente uma entrada oculta com o mesmo nome e o mesmo valor da seleção que você deseja tornar inválida. O primeiro parâmetro pode ser um elemento id ou jquery; o segundo é um parâmetro opcional booleano em que "true" desativa e "false" ativa a entrada. Se omitido, o segundo parâmetro alterna a seleção entre "ativado" e "desativado".
fonte
Encontrei uma solução viável: remova todos os elementos, exceto o selecionado. Você pode alterar o estilo para algo que pareça desativado também. Usando jQuery:
fonte
fonte
Outra opção é usar o atributo somente leitura.
Com somente leitura, o valor ainda é enviado, o campo de entrada fica acinzentado e o usuário não pode editá-lo.
Editar:
Citado em http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :
Quando diz que o elemento pode ter êxito, significa que pode ser enviado, conforme indicado aqui: http://www.w3.org/TR/html401/interact/forms.html#successful-controls
fonte