Este artigo ilustra a finalidade, o funcionamento e o uso da propriedade 'desativada' da caixa de seleção de entrada HTML DOM em JavaScript.
Como a propriedade 'desativada' da caixa de seleção de entrada HTML DOM funciona em JavaScript?
A caixa de seleção de entrada “ desabilitado ” depende do atributo “checkbox”. Ele funciona nos formulários HTML e campos de entrada para desabilitar e desabilitar as caixas de seleção fornecidas.
Sintaxe (defina a propriedade desabilitada)
checkboxObject. desabilitado = verdadeiro | falsoDe acordo com a sintaxe de retorno definida, a propriedade “disabled” suporta dois parâmetros listados a seguir:
- verdadeiro: Representa que a caixa de seleção correspondente está desativada.
- falso (valor padrão): É um valor opcional que denota que a caixa de seleção associada não está desativada.
Retornar (Retornar a propriedade desativada)
checkboxObject. desabilitadoNa sintaxe acima, o “ caixa de seleçãoObjeto ” corresponde ao HTML “ caixa de seleção ' elemento.
Vamos utilizar as sintaxes definidas acima nos exemplos abaixo para entender a implementação prática da propriedade “disabled”.
Exemplo 1: Aplicando a propriedade “disabled” da caixa de seleção de entrada Usando a sintaxe básica
No primeiro exemplo, a “caixa de seleção” é adicionada para desativá-la usando a sintaxe generalizada definida.
Código HTML
Em primeiro lugar, analise o código HTML fornecido:
< estilo de corpo = 'alinhar texto: centro' >
< h2 > HTML Entrada DOM Caixa de seleção Propriedade desabilitada em JavaScript h2 >
Caixa de seleção : < tipo de entrada = 'caixa de seleção' eu ia = 'demonstração' > Formulário enviado < br >< br >
< p > A caixa de seleção fornecida está desativada p >
Nas linhas de código acima:
- O '
” especifica a seção do corpo que está alinhada ao “ Centro ” com a ajuda do “ estilo ” atributo. - O ' ” define o subtítulo do nível 2.
- O '
” cria uma “caixa de seleção” especificando o tipo de entrada “ caixa de seleção ” tendo um id atribuído “ demonstração ”. - O ' ” adiciona um elemento de parágrafo para exibir o resultado resultante.
Código JavaScript
Em seguida, observe o código JavaScript:
< roteiro >documento. getElementById ( 'demonstração' ) . desabilitado = verdadeiro ;
roteiro >
No trecho de código acima, o “ document.getElementById() ” é aplicado para buscar a caixa de seleção usando seu id “demo” e o valor da propriedade “disabled” é definido como “ verdadeiro ” que desativa a caixa de seleção.
Saída
A saída acima confirma que a caixa de seleção fornecida está desativada por causa do “ desabilitado ” propriedade definida como “ verdadeiro ”.
Exemplo 2: retornando o valor da propriedade “disabled” da caixa de seleção de entrada
Este exemplo aplica a propriedade “disabled” para retornar o status da caixa de seleção de destino como um valor booleano (verdadeiro/falso).
Código HTML
Considere o seguinte código HTML:
< estilo de corpo = 'alinhar texto: centro' >< h2 > HTML Entrada DOM Caixa de seleção Propriedade desabilitada em JavaScript h2 >
Caixa de seleção : < tipo de entrada = 'caixa de seleção' desabilitado = verdadeiro eu ia = 'demonstração' > Formulário enviado < br >< br >
< p id = 'amostra' > p >
No bloco de código acima:
- A caixa de seleção é atribuída e o status do “ desabilitado ” propriedade é definida como “ verdadeiro ”.
- Depois disso, um vazio “ ” é adicionado com um id atribuído “sample” para anexar a saída.
Código JavaScript
Agora, passe para o código JavaScript:
< roteiro >existe um = documento. getElementById ( 'demonstração' ) . desabilitado ;
documento. getElementById ( 'amostra' ) . HTML interno = a ;
roteiro >
No código acima:
- A variável “ a ” utiliza o “ document.getElementById() ” para acessar o checkbox usando seu id “demo” e associar o “ desabilitado ” para verificar se a caixa de seleção buscada está desativada ou não.
- O método “document.getElementById()” aplicado novamente busca o parágrafo vazio incluído e exibe o status da propriedade “disabled” como um parágrafo.
Saída
Conforme analisado, o resultado retorna o status alocado da “caixa de seleção”, ou seja, “ verdadeiro ”.
Exemplo 3: Desativar e Desativar a caixa de seleção usando a propriedade 'desativada' da caixa de seleção de entrada
Além de definir e retornar o status da caixa de seleção, a propriedade “disabled” também permite que os usuários desativem e desativem a caixa de seleção ao mesmo tempo. Vejamos na prática.
Código HTML
Vamos revisar o código HTML escrito:
< estilo de corpo = 'alinhar texto: centro' >< h2 > HTML Entrada DOM Caixa de seleção Propriedade desabilitada em JavaScript h2 >
Caixa de seleção : < tipo de entrada = 'caixa de seleção' eu ia = 'demonstração' > Formulário enviado entrada >< br >< br >
< botão ao clicar = 'checkDisable()' > Desative a caixa de seleção botão >
< botão ao clicar = 'checkUndisable ()' > Desative a caixa de seleção botão >
No bloco de código acima:
- Da mesma forma, inclua uma caixa de seleção e adicione um botão com um “ ao clicar ” evento que executa o “ checkDisable() ” ao clicar no botão.
- Depois disso, é adicionado o segundo botão que também usa o manipulador de eventos “onclick” para a execução do “ checkUndisable() ” quando o botão clica.
Código JavaScript
Em seguida, percorra o código abaixo indicado:
< roteiro >verificação de função Desativar ( ) {
documento. getElementById ( 'demonstração' ) . desabilitado = verdadeiro ;
}
função checkUndisable ( ) {
documento. getElementById ( 'demonstração' ) . desabilitado = falso ;
}
roteiro >
Nas linhas de código acima:
- Defina uma função chamada “ checkDisable() ” que aplica o “ document.getElementById() ” para abordar a caixa de seleção por meio de seu id “demo” e definir seu valor como “true”.
- A segunda função “ checkUndisable() ” aplica novamente o método “document.getElementById()” para acessar a caixa de seleção novamente e definir seu valor como “false” se o usuário clicar no segundo botão incluído chamado “Desativar a caixa de seleção”.
Saída
A saída “desativa” a caixa de seleção fornecida quando o usuário clica no primeiro botão e “desativa” se o usuário clicar no segundo botão de acordo.
Conclusão
Em JavaScript, a caixa de seleção de entrada HTML DOM “ desabilitado ” ajuda os usuários a definir e retornar o status marcado da “caixa de seleção”. Ele define as sintaxes generalizadas para ambos os processos “set” e “return”. Sua sintaxe definida funciona em dois valores “ verdadeiro ' e ' falso ”. Por outro lado, sua sintaxe de retorno não requer nenhum parâmetro. Este artigo demonstrou a implementação objetiva, funcional e prática da propriedade “disabled” do HTML DOM Input Checkbox em JavaScript.