Developing

Introdução

Algumas vezes se faz necessário desabilitar controles HTML para que em determinado momento ou em determinada situação o usuário não possa, por exemplo, entrar com dados.

Esse post mostrará como desabilitar HTML (desabilitar elementos HTML) usando jQuery.

Infelizmente o CSS ainda não possui a capacidade de desabilitar controles HTML. Então, uma saída é utilizar o jQuery para controlar isso. Utilizando esse método nos proporciona um controle muito grande para realizarmos isso no momento em que desejamos.

Sometimes it is necessary to disable HTML controls (HTML elements) so that at any given time or in a certain situation user can not, for example, to enter data.

This post shows how to disable HTML control using jQuery. Until now it is not possible to disable HTML using CSS.

O Código

Supúnhamos que desejamos desabilitar todos os elementos dentro de uma div cujo ID é MyDiv.

/*Para desabilitar todos os elementos input dentro da div MyDiv*/
/*To disable all input elements inside div MyDiv*/
jQuery('#MyDiv :input').attr('disabled', true);
/*Para desabilitar todos os select elements dentro da div MyDiv*/
/*To disable all select elements inside div MyDiv*/
jQuery('#MyDiv :select').attr('disabled', true);
/*Para desabilitar todos os submitbuttons dentro da div MyDiv*/
/*To disable all submitbuttons elements inside div MyDiv*/
jQuery('#MyDiv :submit').attr('disabled', true);

Agora vamos incrementar um pouco. Imagine a seguinte situação: Temos um botão / link que ao ser clicado, habilitará o campo de texto e ao ser clicado novamente desativará o campo de texto.

Imagine the following situation: We have a button / link that when clicked, it enables the text field and when clicked again will disable the text field.

O HTML

<input id="txtInformacao" type="text" />
  Disable target

O jQuery

jQuery("#lnkControle").toggle(
function ()
{
    jQuery('#txtInformacao').attr("disabled", true);
},
function ()
{
    jQuery('#txtInformacao').removeAttr("disabled");
});

Veja Também

jQuery – Dialog

javascript – ReplaceAt

jQuery – Themes List at Google Code

jQuery – .ready

jwplayer – Show First Frame

javascript – Detect Mobile

_____

Não se esqueça de deixar seu comentário, critica, elogio, dúvida e etc. Ele é muito importante para a melhoria do blog.
Do not forget to leave your comments, criticism, praise, questions, etc.. It is very important for improving the blog.

Advertisements

Comments on: "jQuery – Disable HTML Controls" (14)

  1. Alberto said:

    Thanks! This is a great post! So helpful.

  2. Obrigada!

  3. […] jQuery – Disable HTML Controls […]

  4. […] jQuery – Disable HTML Controls […]

  5. […] jQuery – Disable HTML Controls […]

  6. Karina said:

    Muito bom. Usei para desabilitar um textbox e um fileupload.

  7. […] jQuery – Disable HTML Controls […]

  8. […] jQuery – Disable HTML Controls […]

  9. Willian said:

    Muito Bom Ajudou Bastante.

  10. […] jQuery – Disable HTML Controls […]

  11. Gabriel Lima said:

    Ajudou!

  12. […] jQuery – Disable HTML Controls […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: