Posted at 2008. 6. 5. 12:00 | Posted in 프로그래밍/ASP, Javascript
text 박스의 readonly 값 역시 true/false로 자바스크립트에서 제어가 가능합니다.
단, readonly를 전부소문자로 사용하면 적용되지 않는다는 것 주의하세요!!
<script>
document.FormX.name.readOnly = false;
</script>
'프로그래밍 > ASP, Javascript' 카테고리의 다른 글
| 2008.07.18 |
| 2008.07.17 |
| 2008.06.05 |
| 2008.04.04 |
| 2007.12.03 |
| 2007.12.02 |
자바스크립트
댓글 (0) // 엮인글 (1)
Name __
Password __
Link (Your Website)
Comment
SECRET | 비밀글로 남기기
input, textarea 등의 속성을 스크립트를 이용해 바꿔줘야 할 경우가 발생한다.
JQuery를 이용해서 속성을 변경하면 그냥 readonly로 써서 적용이 가능하나
<script type="text/javascript"> $(function(){ $("#txt").attr("readonly",true); // readonly 처리 $("#txt").removeAttr("readonly"); // readonly 삭제 } </script> <body> <input type="text" id="txt"> </body>script로 사용할 경우
<script type="text/javascript"> document.getElementById("txt").readOnly=true; // readonly 처리 document.getElementById("txt").readOnly=false; // readonly 삭제 </script> <body> <input type="text" id="txt"> </body>" readonly "가 아닌 " readOnly "와 같이 사용해줘야 한다.
Language/JQuery
2016. 7. 6. 10:42
HTML로 이루어진 front-end 개발을 진행하다보면 텍스트박스, 체크박스등과 같은 input 타입의 요소들에
활성화, 비활성화 처리를 해야 할 경우가 있다.
이때 활성화, 비활성화를 위해 많이 사용하는것이 readonly 와 disabled 이다.
readonly의 경우 value 값을 수정할 수 없게끔 만들어 버리고 disabled의 경우 해당 요소들을 완전 비활성화 해버린다.
간단하게 다시 정리하자면 다음과 같다
readonly : input type="text" 에만 가능.
사용자는 value 값을 변경할 수 없음.
disabled : 모든 input 객체에 대하여 비활성화 처리 가능.
.
disabled 이용시 크게 유의해야 할 점이 있는데, 위에 적었듯이 Form 전송시(Submit)시 해당 객체는 아예 전송이 되지 않는다. 이 부분을 반드시 기억하자.
아래 예제는 간단하게 readonly 와 disabled을 처리하는 스크립트 예제이다.
<script type="text/javascript"> $(document).ready(function(){ // 텍스트 박스 readonly 처리 $("#txtBox").attr("readonly",true); // readonly 삭제 $("#txtBox").removeAttr("readonly"); // disabled 처리 $("#txtBox").attr("disabled",true); // disabled 삭제 $("#txtBox").removeAttr("disabled"); // disabled 여부 if($("#txtBox").is(":disabled")){ console.log("txtBox는 disabled 처리 되어 있음"); } } </script> <body> <input type="text" name="txtBox" id="txtBox" value="멍멍이"> </body>만약 front 화면에서 disabled 처리된 항목을 Form 전송시 받고 싶으면 스크립트로 submit을 처리하고 disabled 처리 되어 있는것을 해제하면 된다.
Ever wonder how to disable another input element through the use of another control? Here is a simple tutorial on how to toggle the disabled attribute of an input element.
For the first demo, we will toggle an input’s disabled status through the use of another control. For this example, we will give our target input an id of target, while our control, in this case a link, we will give it an id of control:
Target text field: <input type="text" id="target" /><br /><a href="#" id="control" />Disable target</a>
Now to toggle the target’s disabled status, it is actually quite simple in jQuery. Using the .attr() attribute we can disable the target. Then using the .removeAttr(), we can remove the disabled status. Here is how the javascript code would look like:
$("#control").toggle(function ()
{
$('#target').attr("disabled", true);
},
function ()
{
$('#target').removeAttr("disabled");
});
Here is a demo on how to toggle the disabled status of an input:
Target text field:
<input id="target" type="text">
Disable target
Although the first method is handy, there are times when we really don’t need a control input. What if we want to enable an input textbox just by clicking on it? Unfortunately, when an input element is disabled, it would no longer register events such as focus or click. The good news is that there is an alternative. Instead of using the disabled attribute, we use the readonly attribute instead. Here is a sample javascript code on making a readonly input enabled using its click event:
$('#readonly').click(function()
{
if ($('#readonly').attr("readonly") == true)
{
$('#readonly').val('');
$('#readonly').removeAttr("readonly");
}
});
Here is the demo of how to change the readonly attribute
This text field will no longer be read-only upon clicking:
<input id="readonly" value="click me to enable" type="text">
If you want to download the source code for this
tutorial,
just click on the link below:
Download Source Code