Habilitando e desabilitando elementos com JQuery

Posted on setembro 7, 2012. Filed under: JavaScript, JQuery, Tips | Tags:, , , |

Introdução

Habilitar e desabilitar elementos em sua página, torna-se uma tarefa simples quando se trata de JQuery. Neste artigo iremos manipular o atributo disabled, usado para controlar se o elemento esta habilitado ou desabilitado, usando o método prop() ao invés de attr(), que é mais específico para esta finalidade.

Veja abaixo alguns exemplos:

Desabilitando elementos:

// desabilitando determinado elemento
$('#id_elemento').prop('disabled', true);

// desabilitando todos elementos dentro de tag <div>
$('div *').prop('disabled', true);

// desabilitando somete elementos do tipo input e button dentro de tag <div>
$('div').find('input, button').prop('disabled', true);

// desabilitando todos tipos de input (input, textarea, select, button) dentro de tag <div>
$('div').find(':input').prop('disabled', true);

Habilitando elementos:

Use o mesmo método prop() conforme anteriormente, mas setando o valor para false.

$('#id_elemento').prop('disabled', false);
...

Considerações

O método prop() foi adicionado à partir da versão 1.6 do jquery. Use prop() ao invés de attr() para atributos como disabled, checked, selected, etc. São atributos considerados “booleanos” na especificação W3C. Ele foi criado para esse propósito. Para maiores detalhes, acesse a documentação do JQUery: http://api.jquery.com/prop/

O método attr() pode fazer o trabalho de desabilitar e habilitar elementos também. Porém com a criação do prop(), o attr() deixou de ser a melhor forma de resolver essa questão. Utilize-o caso esteja com uma versão do jquery mais antiga, inferior à 1.6. Veja abaixo exemplos:

// desabilitando elementos
$('#id_do_elemento').attr('disabled', 'disabled');

// habilitando elementos
$('#id_do_elemento').removeAttr('disabled');

Make a Comment

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Uma resposta to “Habilitando e desabilitando elementos com JQuery”

RSS Feed for Pasqua Tecnologia Comments RSS Feed

Perfeito estava procurando por isso obrigado!


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: