tabxtbox включить/отключить флажок select/unselect с помощью Javascript

Question

У меня есть таблица с тремя столбцами и несколькими строками. Второй и третий столбцы состоят из текстового поля (первого дочернего элемента контейнера) и флажка соответственно.

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> 

Чекбокс

<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. но, похоже, некоторые проблемы с pagelifecycle со сценарием, который я использую. Вот 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 соответственно. Код, приведенный выше в 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

Это еще одно решение, которое я мог придумать, кроме правильного решения Т. Гиббонс

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