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.

edited Nov 23 at 2:39

Maarti

1,4622822

asked Nov 23 at 0:24

Connor

426

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 |

 // 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>

Thanks for any help in advance.

edited Nov 23 at 2:39

Maarti

1,4622822

asked Nov 23 at 0:24

Connor

426

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 |

 // 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>

Thanks for any help in advance.

edited Nov 23 at 2:39

Maarti

1,4622822

asked Nov 23 at 0:24

Connor

426

 // 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>

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

edited Nov 23 at 2:39

Maarti

1,4622822

asked Nov 23 at 0:24

Connor

426

edited Nov 23 at 2:39

Maarti

1,4622822

asked Nov 23 at 0:24

Connor

426

edited Nov 23 at 2:39

Maarti

1,4622822

edited Nov 23 at 2:39

Maarti

1,4622822

edited Nov 23 at 2:39

Maarti

1,4622822

asked Nov 23 at 0:24

Connor

426

asked Nov 23 at 0:24

Connor

426

asked Nov 23 at 0:24

Connor

426

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 |

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>

answered Nov 23 at 0:56

abdulsattar-alkhalaf

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 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>

answered Nov 23 at 6:34

Ehsan

9,61431129

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

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>

answered Nov 23 at 0:56

abdulsattar-alkhalaf

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 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 |

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>

answered Nov 23 at 0:56

abdulsattar-alkhalaf

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 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 |

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>

answered Nov 23 at 0:56

abdulsattar-alkhalaf

31715

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

answered Nov 23 at 0:56

abdulsattar-alkhalaf

31715

answered Nov 23 at 0:56

abdulsattar-alkhalaf

31715

answered Nov 23 at 0:56

abdulsattar-alkhalaf

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 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 |

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>

answered Nov 23 at 6:34

Ehsan

9,61431129

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>

answered Nov 23 at 6:34

Ehsan

9,61431129

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>

answered Nov 23 at 6:34

Ehsan

9,61431129

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

answered Nov 23 at 6:34

Ehsan

9,61431129

answered Nov 23 at 6:34

Ehsan

9,61431129

answered Nov 23 at 6:34

Ehsan

9,61431129

add a 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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl