使用 Javascript 在复选框 select/unselect 上使用 tetxtbox enable/disable

Question

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

文本框

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




    }

});

我只是想切换或 add/remove class "checkers" 并相应地设置文本框的 "disabled" 属性。 HideFunc 中的上述代码是我尝试过的解决方法之一，但它不起作用。

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

Answer 1

正如第一条评论所暗示的，更好的方法是检查复选框的状态，而不是 add/remove class。此外，使用 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
});

Answer 2

除了 T. Gibbons 的正确解决方案之外，这是我能想到的另一个解决方案

var $j= jQuery.noConflict();
$j("td.SBS2 ").click(function(){

$j(this).closest("tr").find(".InputText").prop("disabled",$j(this).children("input")[0].checked);
 $j(this).closest("tr").find(".InputText").prop("value","");

    var len=document.getElementsByClassName("InputText").length;
    for(var i=0;i<=len;i++)
    {
document.getElementsByClassName("InputText")[i].style.width="300px";
    }   
});

使用 Javascript 在复选框 select/unselect 上使用 tetxtbox enable/disable

tetxtbox enable/disable on checkbox select/unselect using Javascript

javascript

css

class

qualtrics