Solved

How can I set readOnly to all my inputs with Jquery?

Posted on 2010-09-08
12
559 Views
Last Modified: 2012-05-10
I have many inputs from my page, I only to set all of them to readOnly.

How can I do this?

thanks
0
Comment
Question by:hidrau
  • 6
  • 3
  • 3
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33626815
Use for textbox : $("input[type='text']).attr("readonly","readonly");
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33626828
I miss a double quote : $("input[type='text']").attr("readonly","readonly");
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33626831
$(":input").each(function(){
  $(this).attr("readonly", true);
});

see this link on how to get all the inputs
http://api.jquery.com/input-selector/

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Accepted Solution

by:
leakim971 earned 400 total points
ID: 33626880
readonly attribute don't work on checkbox and radio, you may want to disable radio and checkbox : $("input[type='checkbox'],input[type='radio']").attr("disabled","true");

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("input[type='text']").attr("readonly","readonly");
		$("input[type='checkbox'],input[type='radio']").attr("disabled","true");
	});
</script>
</head>
<body>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
<input type="submit" /><br>
<input type="radio" /><br>
<input type="checkbox" /><br>
</body>
</html>

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33626899
ok, in that case, shouldn't we disable all the inputs?

$(":input").attr('disabled', 'disabled');
0
 
LVL 1

Author Comment

by:hidrau
ID: 33626916
ok,

and how can I do this in select?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33626919
if you disable them all, you can't get their value on server side (form POST/GET)
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 100 total points
ID: 33627000
<<and how can I do this in select?>>
it takes care of select as well.

<<if you disable them all, you can't get their value on server side (form POST/GET)>>
I think he can enable it back using a similar
$(":input").removeAttr('disabled');

Similar logic will be applied to checkboxes as well, since they cannot be set to readonly.



0
 
LVL 1

Author Comment

by:hidrau
ID: 33627064
ok, I will open another thread with this question for select
0
 
LVL 1

Author Closing Comment

by:hidrau
ID: 33627073
thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33627090
>I think he can enable it back using a similar

by clicking on a disabled select or input/submit button ? ;o)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33627103
You're welcome! Thanks for the points!
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question