Show text and disable checkbox on click
So I have two separate functions, one for disabling the second checkbox when someone clicks on the first and another function which displays some text when someone clicks on a checkbox but I can't get the two functions to play nicely together. The functions work fine on there own. The whole thing breaks when you try to use both functions:
// on click disable other text box
function ckChange1(direct) {
var ckName = document.getElementsByName(direct.name);
for (var i = 0, c; c = ckName[i]; i++) {
c.disabled = !(!direct.checked || c === direct);
}
}
// shows text on click
function showText() {
const checkBox = document.getElementById("progress1");
const text = document.getElementById("text");
if ((checkBox.checked = true)){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1(this); showText();">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1(this); showText();">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
I can't seem to figure this one out since the second function isn't changing the value of the checkbox at all rather it's just checking the value so I don't see why it would interfere with the first function.
Thanks for any help in advance.
javascript html css dom
add a comment |
So I have two separate functions, one for disabling the second checkbox when someone clicks on the first and another function which displays some text when someone clicks on a checkbox but I can't get the two functions to play nicely together. The functions work fine on there own. The whole thing breaks when you try to use both functions:
// on click disable other text box
function ckChange1(direct) {
var ckName = document.getElementsByName(direct.name);
for (var i = 0, c; c = ckName[i]; i++) {
c.disabled = !(!direct.checked || c === direct);
}
}
// shows text on click
function showText() {
const checkBox = document.getElementById("progress1");
const text = document.getElementById("text");
if ((checkBox.checked = true)){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1(this); showText();">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1(this); showText();">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
I can't seem to figure this one out since the second function isn't changing the value of the checkbox at all rather it's just checking the value so I don't see why it would interfere with the first function.
Thanks for any help in advance.
javascript html css dom
you are readingdirect.name
where as you have noname
attribute in your checkboxes. As a result yourckName
var is empty array. How is this working for you?
– Gurtej Singh
Nov 23 at 0:31
add a comment |
So I have two separate functions, one for disabling the second checkbox when someone clicks on the first and another function which displays some text when someone clicks on a checkbox but I can't get the two functions to play nicely together. The functions work fine on there own. The whole thing breaks when you try to use both functions:
// on click disable other text box
function ckChange1(direct) {
var ckName = document.getElementsByName(direct.name);
for (var i = 0, c; c = ckName[i]; i++) {
c.disabled = !(!direct.checked || c === direct);
}
}
// shows text on click
function showText() {
const checkBox = document.getElementById("progress1");
const text = document.getElementById("text");
if ((checkBox.checked = true)){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1(this); showText();">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1(this); showText();">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
I can't seem to figure this one out since the second function isn't changing the value of the checkbox at all rather it's just checking the value so I don't see why it would interfere with the first function.
Thanks for any help in advance.
javascript html css dom
So I have two separate functions, one for disabling the second checkbox when someone clicks on the first and another function which displays some text when someone clicks on a checkbox but I can't get the two functions to play nicely together. The functions work fine on there own. The whole thing breaks when you try to use both functions:
// on click disable other text box
function ckChange1(direct) {
var ckName = document.getElementsByName(direct.name);
for (var i = 0, c; c = ckName[i]; i++) {
c.disabled = !(!direct.checked || c === direct);
}
}
// shows text on click
function showText() {
const checkBox = document.getElementById("progress1");
const text = document.getElementById("text");
if ((checkBox.checked = true)){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1(this); showText();">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1(this); showText();">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
I can't seem to figure this one out since the second function isn't changing the value of the checkbox at all rather it's just checking the value so I don't see why it would interfere with the first function.
Thanks for any help in advance.
// on click disable other text box
function ckChange1(direct) {
var ckName = document.getElementsByName(direct.name);
for (var i = 0, c; c = ckName[i]; i++) {
c.disabled = !(!direct.checked || c === direct);
}
}
// shows text on click
function showText() {
const checkBox = document.getElementById("progress1");
const text = document.getElementById("text");
if ((checkBox.checked = true)){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1(this); showText();">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1(this); showText();">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
// on click disable other text box
function ckChange1(direct) {
var ckName = document.getElementsByName(direct.name);
for (var i = 0, c; c = ckName[i]; i++) {
c.disabled = !(!direct.checked || c === direct);
}
}
// shows text on click
function showText() {
const checkBox = document.getElementById("progress1");
const text = document.getElementById("text");
if ((checkBox.checked = true)){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1(this); showText();">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1(this); showText();">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
javascript html css dom
javascript html css dom
edited Nov 23 at 2:39
Maarti
1,4622822
1,4622822
asked Nov 23 at 0:24
Connor
426
426
you are readingdirect.name
where as you have noname
attribute in your checkboxes. As a result yourckName
var is empty array. How is this working for you?
– Gurtej Singh
Nov 23 at 0:31
add a comment |
you are readingdirect.name
where as you have noname
attribute in your checkboxes. As a result yourckName
var is empty array. How is this working for you?
– Gurtej Singh
Nov 23 at 0:31
you are reading
direct.name
where as you have no name
attribute in your checkboxes. As a result your ckName
var is empty array. How is this working for you?– Gurtej Singh
Nov 23 at 0:31
you are reading
direct.name
where as you have no name
attribute in your checkboxes. As a result your ckName
var is empty array. How is this working for you?– Gurtej Singh
Nov 23 at 0:31
add a comment |
2 Answers
2
active
oldest
votes
I think I didn't understand your request
but try this
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click onmulti-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.
– Connor
Nov 25 at 13:40
add a comment |
Try This :
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53439358%2fshow-text-and-disable-checkbox-on-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think I didn't understand your request
but try this
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click onmulti-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.
– Connor
Nov 25 at 13:40
add a comment |
I think I didn't understand your request
but try this
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click onmulti-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.
– Connor
Nov 25 at 13:40
add a comment |
I think I didn't understand your request
but try this
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
I think I didn't understand your request
but try this
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
function ckChange1(direct) {
var element=document.getElementById(direct);
var ed=element.disabled;
element.disabled=!ed;
showText(!ed);
}
function showText(ed) {
const text = document.getElementById("text");
text.style.display = ed?"block":"none";
}
#text{
display: none;
}
<input type="checkbox" id="progress2" onclick="ckChange1('progress1');">
<label>DIRECT</label>
<input type="checkbox" id="progress1" onclick="ckChange1('progress2');">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
answered Nov 23 at 0:56
abdulsattar-alkhalaf
31715
31715
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click onmulti-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.
– Connor
Nov 25 at 13:40
add a comment |
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click onmulti-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.
– Connor
Nov 25 at 13:40
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click on
multi-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.– Connor
Nov 25 at 13:40
Hi thanks for that! however, I just realised there's a small issue but it's entirely my fault for not explaining properly. So it should only display the text if they click on
multi-route type
checkbox if they click on direct checkbox then nothing should happen. How would I implement this? Thanks again.– Connor
Nov 25 at 13:40
add a comment |
Try This :
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
add a comment |
Try This :
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
add a comment |
Try This :
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
Try This :
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
function ckChange1(t) {
var allRadios = document.getElementsByClassName('rad') ;
var text = document.getElementById('text') ;
t.checked = t.checked ? true : false ;
for( var i = 0; i < allRadios.length ; i++) {
if (allRadios[i] != t) {
allRadios[i].checked = false ;
allRadios[i].disabled = t.checked ;
}
}
text.style.display = t.checked ? "block" : "none" ;
}
#text {
display: none;
}
<input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)">
<label>DIRECT</label>
<input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);">
<label>MULTI-ROUTE TYPE</label>
<h2>Drop Off</h2>
<h2 id="text">First Drop Off</h2>
answered Nov 23 at 6:34
Ehsan
9,61431129
9,61431129
add a comment |
add a comment |
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.
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%2f53439358%2fshow-text-and-disable-checkbox-on-click%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
you are reading
direct.name
where as you have noname
attribute in your checkboxes. As a result yourckName
var is empty array. How is this working for you?– Gurtej Singh
Nov 23 at 0:31