單擊顯示文本並禁用復選框

Question

因此，我有兩個單獨的功能，一個用於當某人單擊第一個復選框時禁用第二個復選框，另一個用於在某人單擊某個復選框時顯示一些文本的功能，但是我無法使這兩個功能很好地配合使用。 這些功能本身就可以正常工作。 當您嘗試同時使用這兩個功能時，整個過程都會中斷：

  // on click disable other text box function ckChange1(direct) { var ckName = document.getElementsByName(direct.name); for (var i = 0, c; c = ckName[i]; i++) { c.disabled = !(!direct.checked || c === direct); } } // shows text on click function showText() { const checkBox = document.getElementById("progress1"); const text = document.getElementById("text"); if ((checkBox.checked = true)){ text.style.display = "block"; } else { text.style.display = "none"; } } 

  #text{ display: none; } 

  <input type="checkbox" id="progress2" onclick="ckChange1(this); showText();"> <label>DIRECT</label> <input type="checkbox" id="progress1" onclick="ckChange1(this); showText();"> <label>MULTI-ROUTE TYPE</label> <h2>Drop Off</h2> <h2 id="text">First Drop Off</h2> 

我似乎無法弄清楚這一點，因為第二個功能根本沒有更改復選框的值，而只是檢查值，所以我看不出它為什么會干擾第一個功能。

感謝您的任何幫助。

Answer 1

我想我聽不懂你的要求
但是試試這個

 function ckChange1(direct) { var element=document.getElementById(direct); var ed=element.disabled; element.disabled=!ed; showText(!ed); } function showText(ed) { const text = document.getElementById("text"); text.style.display = ed?"block":"none"; } 

 #text{ display: none; } 

 <input type="checkbox" id="progress2" onclick="ckChange1('progress1');"> <label>DIRECT</label> <input type="checkbox" id="progress1" onclick="ckChange1('progress2');"> <label>MULTI-ROUTE TYPE</label> <h2>Drop Off</h2> <h2 id="text">First Drop Off</h2> 

Answer 2

嘗試這個 ：

 function ckChange1(t) { var allRadios = document.getElementsByClassName('rad') ; var text = document.getElementById('text') ; t.checked = t.checked ? true : false ; for( var i = 0; i < allRadios.length ; i++) { if (allRadios[i] != t) { allRadios[i].checked = false ; allRadios[i].disabled = t.checked ; } } text.style.display = t.checked ? "block" : "none" ; } 

 #text { display: none; } 

 <input type="checkbox" class="rad" id="progress2" onclick="ckChange1(this)"> <label>DIRECT</label> <input type="checkbox" class="rad" id="progress1" onclick="ckChange1(this);"> <label>MULTI-ROUTE TYPE</label> <h2>Drop Off</h2> <h2 id="text">First Drop Off</h2>