Pergunta

Eu tenho um campo SELECT de seleção múltipla cujo valor não quero que o usuário final possa alterar.

Por motivos de interface do usuário, gostaria de poder fazer isso sem usar o atributo desativado = "true".Tentei usar onmousedown, onfocus, onclick e configurar cada um para desfocar ou retornar falso, mas sem sucesso.

Isso pode ser feito ou estou tentando fazer o impossível?

Foi útil?

Solução

Eu sei que você mencionou que não quer, mas na verdade acho que usar o disabled atributo é uma solução melhor:

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

Se necessário, você sempre pode dar o select a class e estilize-o com CSS.Esta solução funcionará em todos os navegadores, independentemente dos recursos de script.

Outras dicas

Você poderia fazer isso com um onchange evento?

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

Sua melhor aposta seria trocar as opções na caixa de seleção.Se você tiver apenas uma resposta nessa caixa, não importa se ela é clicável.

No entanto, eu tentaria encontrar outra maneira de fazer isso, pois parece que isso causaria frustração ao usuário.Imagine este cenário de usuário:

  1. "Olha, uma caixa de seleção de opções."
  2. clique
  3. "Hmm, por que isso não funcionou?"
  4. clique
  5. clique!
  6. “Essa coisa estúpida está quebrada, nunca mais voltarei aqui.”

Se você trocar o select por texto HTML, o mesmo objetivo será alcançado.Esta é uma tarefa bastante simples para a maioria das principais estruturas Javascript.

@Jack & @17 de 26, bom argumento, mas o usuário final espera que a caixa de seleção seja desativada para que a confusão não seja um problema.

Eu deveria ter sido mais claro sobre por que não poderia simplesmente desativar o controle.

O aplicativo que usará isso precisará desabilitar a seleção das opções e é necessário que o controle "bloqueado" ainda mantenha a aparência dos controles de formulário normais.

Experimente este gatilho.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Há uma nova adição recente ao CSS3 que é 95% compatível com todos os navegadores atuais, exceto Opera Mini, chamado pointer-events.Simplificando, você pode "desabilitar" a ação padrão em um SELECT ou qualquer outro elemento, e ainda poder realizar eventos específicos nele...

Você pode ver o artigo de Chris Coyier sobre eles em insira a descrição do link aqui.

Isso está mais próximo do que você está procurando ...Desculpe por não poder fornecer nenhum dos meus próprios exemplos de codificação ...

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top