テキサスボックスチェックボックスで有効/無効にするJavascriptを使用して選択/非選択

Question

私は3列と複数行のテーブルを持っています。 2番目と3番目の列は、それぞれテキストボックス（コンテナの最初の子）とチェックボックスで構成されます。

テキストボックス

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

Iを無効にし、チェックボックスのチェックに各行のテキストボックスを有効にして、JavaScriptを使用してそれぞれオフしなければなりません。私が使用しているスクリプトにはいくつかのページ違反の問題があるようです。ここで私は、私はちょうど切り替えや追加/クラス「チェッカー」を削除しようとし、それに応じてtexboxesの「無効」プロパティを設定しています、私の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; 
     } 




    } 

}); 

を使用していJavascriptがあります。上のHideFuncのコードは私が試した回避策の1つですが、うまくいきません。

チェックボックスの変更を確認する別の方法はありますか？

Answer 1

最初のコメントが示唆したように、より良いアプローチは、クラスを追加/削除するのではなく、チェックボックスのステータスをチェックすることです。また、プロトタイプを使用することで、より簡単になります。これを試してみてください：

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