javascript - 单击时显示文本并禁用复选框

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>