Показать текст и отключить флажок при клике

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

Answer 2

Мне кажется, я не поняла ваш запросно попробуйте это

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>