Wednesday, August 13, 2014

How to enable or disable an element using JQuery

Syntax to Enable An Element

$('#submitbutton').prop("disabled", false);

Syntax to Disable An Element

$('#submitbutton').prop("disabled", true);

Example Program

enableDisableElement.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JQuery Example</title>
</head>
<script type="text/javascript" src="lib/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/enableDisableInJQuery.js"></script>

<body>
 <table>
   <tr>
     <td><input type="text" id="myTextBox" value="Hi Dear" /></td>
   </tr>
   <tr>
     <td><input type="button" id="disableTxt" value="Disable Text" /></td>
     <td><input type="button" id="enableTxt" value="Enable Text" /></td>
   </tr>
 </table>
</body>
</html>

enableDisableElement.js
$(document).ready(function() {
 $("#disableTxt").click(function() {
   $("#myTextBox").prop("disabled", true);
 }),

 $("#enableTxt").click(function() {
   $("#myTextBox").prop("disabled", false);
 });
});

No comments :

Post a Comment