Show text and disable checkbox on click












0














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.










share|improve this question
























  • 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
















0














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.










share|improve this question
























  • 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














0












0








0







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.










share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 at 2:39









Maarti

1,4622822




1,4622822










asked Nov 23 at 0:24









Connor

426




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


















  • 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




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












2 Answers
2






active

oldest

votes


















1














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>








share|improve this answer





















  • 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



















1














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>








share|improve this answer





















    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


















    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









    1














    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>








    share|improve this answer





















    • 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
















    1














    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>








    share|improve this answer





















    • 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














    1












    1








    1






    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>








    share|improve this answer












    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>






    share|improve this answer












    share|improve this answer



    share|improve this answer










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
















    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













    1














    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>








    share|improve this answer


























      1














      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>








      share|improve this answer
























        1












        1








        1






        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>








        share|improve this answer












        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 23 at 6:34









        Ehsan

        9,61431129




        9,61431129






























            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














            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





















































            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







            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)