Monday, 6 June 2016

Enable/Disable or grey out the fields using jQuery

Even after working on many applications, I tend to google for disabling some of the fields in the application using jQuery. Following is the list of components and the way to disable/enable or grey out the fields.

Input Box:

$("#title").attr('readonly', true); -- To Disable
$("#title").attr('readonly', false); -- To Enable

Check Box:

$("#title").attr('disable', true); -- To Disable
$("#title").attr('disable', false); -- To Enable

Select or Dropdown Box:

$('select#myList').attr('disabled', true); - To Disable
$('select#myList').attr('disabled', false); - To Enable

Span:

$("#mySpan").css("pointer-events", "none"); - To Disable
$("#mySpan").css("pointer-events", "auto"); - To Enable

Button:

$("#myButton").prop('disabled','disabled'); - To Disable
$("#myButton").prop('disabled',''); - To Enable

No comments:

Post a Comment