javascript - tetxtbox 在复选框上启用/禁用使用 Javascript 选择/取消选择

Question

我有一个包含三列和多行的表格。第二和第三列分别由一个文本框(容器的第一个子项)和一个复选框组成。

文本框

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

复选框

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

我必须分别使用 javascript 禁用和启用复选框选中和取消选中时每一行中的文本框。但是我正在使用的脚本似乎存在一些页面生命周期问题。这是我在 Qualtrics 调查 JS 界面中使用的 Javascript，

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




    }

});

我只是想切换或添加/删除类“跳棋”并相应地设置文本框的“禁​​用”属性。 HideFunc 中的上述代码是我尝试过的解决方法之一，但它不起作用。

是否有另一种检查复选框更改的方法？

Answer 1

正如第一条评论所暗示的，更好的方法是检查复选框的状态，而不是添加/删除类。此外，使用 prototypejs 使它更容易。试试这个:

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