Tetxtbox aktivieren/deaktivieren auf Kontrollkästchen aktivieren/deaktivieren mit Javascript

Question

Ich habe eine Tabelle mit drei Spalten und mehreren Zeilen. Die zweite und dritte Spalte bestehen aus einem Textfeld (erstes Kind eines Containers) und einem Kontrollkästchen.

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> 

Ankreuzfeld

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

Ich habe die Textfelder in jeder Zeile auf Checkbox deaktivieren und aktivieren und deaktivieren bzw. Javascript. Aber es scheint einige Page Lifecycle-Probleme mit dem Skript, das ich verwende. Hier ist das Javascript, das ich in meinem Qualtrics Umfrage JS Schnittstelle verwenden,

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




    } 

}); 

ich gerade versucht, die Klasse „Kontrolleure“ und die Einstellung „deaktiviert“ Eigentums der texboxes entsprechend zu wechseln oder hinzufügen/entfernen. Der Code oben in HideFunc ist einer der Workarounds, die ich ausprobiert habe, aber es funktioniert nicht.

Gibt es eine andere Möglichkeit, um die Checkbox zu ändern?

Answer 1

Wie der erste Kommentar andeutete, ist es besser, den Status des Kontrollkästchens zu überprüfen, anstatt eine Klasse hinzuzufügen/zu entfernen. Auch die Verwendung von Prototypjs macht es einfacher. Versuchen Sie folgendes:.

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

Diese andere Lösung, die ich tun konnte, abgesehen von der richtigen Lösung durch 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"; 
    } 
});