Toggle disabled text input onclick
up vote
1
down vote
favorite
My code is working perfectly until the inputbox is disabled and onclick is not triggering anything when the inputbox is on disabled mode.
Pretty simple :)
html:
<input id=toggleMe>
javascript:
var toggleMe=document.getElementById("toggleMe");
toggleMe.onclick=function(){if(toggleMe.disabled==false){toggleMe.disabled=true;}else{toggleMe.disabled=false;}}
jsfiddle:
https://jsfiddle.net/45cx6rwv/
javascript html if-statement input onclick
asked Nov 11 at 9:29
Hezi-Gangina
365114
add a comment |
up vote
1
down vote
favorite
My code is working perfectly until the inputbox is disabled and onclick is not triggering anything when the inputbox is on disabled mode.
Pretty simple :)
html:
<input id=toggleMe>
javascript:
var toggleMe=document.getElementById("toggleMe");
toggleMe.onclick=function(){if(toggleMe.disabled==false){toggleMe.disabled=true;}else{toggleMe.disabled=false;}}
jsfiddle:
https://jsfiddle.net/45cx6rwv/
javascript html if-statement input onclick
asked Nov 11 at 9:29
Hezi-Gangina
365114
lil emprovement here: you may get rid ofifstatements bytoggleMe.onclick=function(){toggleMe.disabled=!toggleMe.disabled}
– Smollet777
Nov 11 at 9:46
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
My code is working perfectly until the inputbox is disabled and onclick is not triggering anything when the inputbox is on disabled mode.
Pretty simple :)
html:
<input id=toggleMe>
javascript:
var toggleMe=document.getElementById("toggleMe");
toggleMe.onclick=function(){if(toggleMe.disabled==false){toggleMe.disabled=true;}else{toggleMe.disabled=false;}}
jsfiddle:
https://jsfiddle.net/45cx6rwv/
javascript html if-statement input onclick
asked Nov 11 at 9:29
Hezi-Gangina
365114
My code is working perfectly until the inputbox is disabled and onclick is not triggering anything when the inputbox is on disabled mode.
Pretty simple :)
html:
<input id=toggleMe>
javascript:
var toggleMe=document.getElementById("toggleMe");
toggleMe.onclick=function(){if(toggleMe.disabled==false){toggleMe.disabled=true;}else{toggleMe.disabled=false;}}
jsfiddle:
https://jsfiddle.net/45cx6rwv/
javascript html if-statement input onclick
javascript html if-statement input onclick
asked Nov 11 at 9:29
Hezi-Gangina
365114
asked Nov 11 at 9:29
Hezi-Gangina
365114
asked Nov 11 at 9:29
Hezi-Gangina
365114
asked Nov 11 at 9:29
Hezi-Gangina
365114
asked Nov 11 at 9:29
Hezi-Gangina
365114
365114
lil emprovement here: you may get rid ofifstatements bytoggleMe.onclick=function(){toggleMe.disabled=!toggleMe.disabled}
– Smollet777
Nov 11 at 9:46
add a comment |
lil emprovement here: you may get rid ofifstatements bytoggleMe.onclick=function(){toggleMe.disabled=!toggleMe.disabled}
– Smollet777
Nov 11 at 9:46
lil emprovement here: you may get rid of
if statements by toggleMe.onclick=function(){toggleMe.disabled=!toggleMe.disabled}– Smollet777
Nov 11 at 9:46
lil emprovement here: you may get rid of
if statements by toggleMe.onclick=function(){toggleMe.disabled=!toggleMe.disabled}– Smollet777
Nov 11 at 9:46
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
You can not click on disabled elements. You can use a class instead based on which you can set the readOnly property of the element:
document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">answered Nov 11 at 9:47
Mamun
23.3k71428
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Isthis.classList.toggle("disabled")would not be better solution?
– Smollet777
Nov 11 at 9:53
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
|
show 1 more comment
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
You can not click on disabled elements. You can use a class instead based on which you can set the readOnly property of the element:
document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">answered Nov 11 at 9:47
Mamun
23.3k71428
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Isthis.classList.toggle("disabled")would not be better solution?
– Smollet777
Nov 11 at 9:53
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
|
show 1 more comment
up vote
2
down vote
accepted
You can not click on disabled elements. You can use a class instead based on which you can set the readOnly property of the element:
document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">answered Nov 11 at 9:47
Mamun
23.3k71428
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Isthis.classList.toggle("disabled")would not be better solution?
– Smollet777
Nov 11 at 9:53
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
|
show 1 more comment
up vote
2
down vote
accepted
up vote
2
down vote
accepted
You can not click on disabled elements. You can use a class instead based on which you can set the readOnly property of the element:
document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">answered Nov 11 at 9:47
Mamun
23.3k71428
You can not click on disabled elements. You can use a class instead based on which you can set the readOnly property of the element:
document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">document.getElementById('toggleMe').addEventListener('click', function(){
this.classList.toggle("disabled");
if(this.classList.value.includes('disabled')){
this.readOnly = true;
} else {
this.readOnly = false;
}
});.disabled{
background-color: #DDD;
color: #999;
}<input id="toggleMe">answered Nov 11 at 9:47
Mamun
23.3k71428
edited Nov 11 at 10:08
answered Nov 11 at 9:47
Mamun
23.3k71428
answered Nov 11 at 9:47
Mamun
23.3k71428
answered Nov 11 at 9:47
Mamun
23.3k71428
23.3k71428
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Isthis.classList.toggle("disabled")would not be better solution?
– Smollet777
Nov 11 at 9:53
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
|
show 1 more comment
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Isthis.classList.toggle("disabled")would not be better solution?
– Smollet777
Nov 11 at 9:53
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Cool Man! But I'm not using jQuery... :D
– Hezi-Gangina
Nov 11 at 9:53
Is
this.classList.toggle("disabled") would not be better solution?– Smollet777
Nov 11 at 9:53
Is
this.classList.toggle("disabled") would not be better solution?– Smollet777
Nov 11 at 9:53
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina there is no jquery.
– Smollet777
Nov 11 at 9:55
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Hezi-Gangina, I mistakenly added that script....removed now....the solution is purely on JavaScript.
– Mamun
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
@Smollet777 + Mamun = SupermanS !!! :D :D :D
– Hezi-Gangina
Nov 11 at 10:00
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247400%2ftoggle-disabled-text-input-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
lil emprovement here: you may get rid of
ifstatements bytoggleMe.onclick=function(){toggleMe.disabled=!toggleMe.disabled}– Smollet777
Nov 11 at 9:46