using JS to lock out a div

Question

Hello, is there anyway I can use jQuery to lock out a div, ie, make the div grey out, on the submission of a button?

$('#buttoncancel').click(function()
  {
   $('#radiodj').hide('slow');
  }
 );

Currently, that hides the radiodj div as you can see, but how do I make it so that the div becomes greyed out/disabled, using jQuery?

Answer 1

Try the blockui plugin

Answer 2

General solution for such problem is to create second div (background:black, display:none), which will overlap the first one. Then just $('#fullblackdiv').css({opacity:0,display:block}).aniamte({opacity:0.5},1000).

Answer 3

I believe you could simply...

$('#radiodj').attr("disabled", true);

...and on the flip side...

$('#radiodj').removeAttr("disabled");

...to revert it if so required.

That said, (it probably goes without saying, but) you should presume all input tainted and handle it appropriately in your backend scripting language, as it's fairly trivial to override such things in browsers using developer plug-ins, etc.

Answer 4

Here is another one: jquery loadmask plugin