tetxtbox enable/disable on checkbox select/unselect using Javascript

Question

I have a table with three columns and multiple rows. 2nd and third column consist of a textbox(first child of a container) and a checkbox respectively.

Textbox

<td class="SBS1 c4">
  <input class="Medium InputText" type="text" name="QR~QID33#1~1~1~TEXT" id="QR~QID33#1~1~1~TEXT" value="" disabled="">
  <label class="offScreen" for="QR~QID33#1~1~1~TEXT">&amp;nbsp; - &amp;nbsp; - hh</label>
</td>

Checkbox

 <td class="SBS2 c7">
   <input type="checkbox" id="QR~QID33#2~1~1" name="QR~QID33#2~1~1" value="Selected">
   <label class="q-checkbox q-checked" for="QR~QID33#2~1~1"></label>
   <label class="offScreen" for="QR~QID33#2~1~1">&amp;nbsp; - 󠆺random text</label>
</td>

I have to disable and enable the textboxes in each row on checkbox check and uncheck respectively using javascript. but there seem to be some pagelifecycle issues with the script I am using. Here is the Javascript that I am using in my Qualtrics survey JS interface,

      Qualtrics.SurveyEngine.addOnload(function()
        {
          /*Place Your JavaScript Here*/

    var count=document.getElementsByClassName("q-checkbox").length;
    for(var i=0;i<count;i++)
    {

        document.getElementsByClassName("q-checkbox")[i].parentNode.addEventListener("click",hideFunc);
    }



    function hideFunc()
    {

        console.log(this.className);


        if(this.classList.contains("checkers"))

        {
            //this.classList.toggle("checkers");
        this.previousSibling.previousSibling.previousSibling.firstChild.disabled="false";
        this.classList.add("checkers");
        return; 


        }
        else
        if(!(this.classList.contains("checkers")))
        {   

        this.previousSibling.previousSibling.previousSibling.firstChild.disabled="true";
         this.classList.remove("checkers");
            return;
        }




    }

});

I am just trying to toggle or add/remove the class "checkers"and setting "disabled" property of the texboxes accordingly. The code above in HideFunc is one of the work-around I have tried but it is not working.

Is there another way to check for checkbox change?

Answer 1

As the first comment hinted, a better approach is to check the status of the checkbox rather than add/remove a class. Also, making use of prototypejs makes it easier. Try this:

Qualtrics.SurveyEngine.addOnload(function() {
    var qid = this.questionId;
    $(qid).select('tr.Choice').each(function(choice,idx) {      //loop through each row
        var cbox = choice.select('td.SBS2').first().down(); //cbox enables 1st question in row
        var txtEl = choice.select('td.SBS1').first().down();  //text input to be enabled/disabled
        if(cbox.checked == false) { //initialize text input disabled status
            txtEl.value = null; //blank text input
            txtEl.disabled = true;  //disable text input
        }           
        cbox.on('click', function(event, element) { //enable/disable text input on cbox click
            if(cbox.checked == false) { //unchecked
                txtEl.value = null; //blank text input
                txtEl.disabled = true;  //disable text input
            }
            else {  //checked
                txtEl.disabled = false; //enable text input
            }
        }); //end on function
    }); //end row loop
});