複選框啓用/禁用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接口，

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




    } 

}); 

我只是想切換或添加/刪除類「跳棋」，並相應地設置texboxes的「禁用」屬性的JavaScript。上面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 
}); 

Answer 2

這是另一種解決方案，我能想出，除了正確的解決方案由T.長臂猿

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