How to disable a div

Question

Hi I have a div container having some string,Some child div have a text like "Welcome", I want to make that container div disabled i.e not clickable, If that container child div have "Welcome" string. My Markup is like this.

<div>
<span>some text</span>
<span>some text</span>
    <div>
        <span>some text</span>
        <span>some text</span>
    </div>
    <div>
       Welcome
    </div>
    <div>
       Welcome
    </div>

</div>

Answer 1

If you want to disable a div, give it the class name "disabled", e.g.:

<div class="disabled">Whatever</div>

Then you can hook into all disabled divs' click events to prevent it from handling.

$('div.disabled').live('click', function(e) {
    e.stopPropagation();  // you might not want this depending on your intentions
    e.preventDefault();
    return false;
});

Answer 2

$('div:contains("Welcome")')
  .prop('disabled', true);

Or if you want to do only divs that have exactly Welcome.

$('div:contains("Welcome")').filter(function() {
    return $(this).html() == 'Welcome';
}).prop('disabled', true);

It appears clicking a disabled="disabled" element still fires its click event.

So you can off('click') instead, and leave the disabled if you like for semantic reasons (and as a CSS hook, i.e. div[disabled]).

Answer 3

I´m no sure I understood your question, I hope this is what youre looking for:

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Please comment if not

Answer 4

I presume you are using this as welcome message once user is logged in ... if user is loggedin you would have a link there... if is logged in then the user would just read welcome...

you need to do this on the server side scripting instead of client side.

anyways if you still need a client side solution.

$('div').each(function (){
  if($this.text().trim()=='Welcome'){
     $(this).click(function (){return false;})
  }
});

It would be a good idea if you use a class name as this is far better than just checking all the divs... the trim will remove all the white spaces before and after. so hope this helps.

Answer 5

It's not as simple as assigning the attribute "disabled=disabled" to the DIV element. That will gray it out, but all elements in the DIV are still accessible and clickable. To truly disable the contents in the DIV, you have to select all descendants in the DIV...

$("div#your-id *").find(function(index) {
 // the jQuery find function will find all descendants inside the DIV
});

and then have to disable each found element. But even that isn't as simple as assigning the attribute "disabled=disabled" because some elements don't respond to the "disabled" attributes, such as links. Elements with click events assigned will not be disabled by assigning "disabled=disabled". You have to remove all events on all elements in the DIV.

I created a jQuery plugin that can completely disable the content inside a DIV. With my plugin, you simply need to do this..

$("div#your-id").disabler({
  disable : true
});

and all elements in the DIV will be really disabled. Use it or rip the code out of it and get ideas from it. ( http://www.dougestep.com/dme/jquery-disabler-widget ).