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>

我似乎无法弄清楚这一点，因为第二个功能根本没有改变复选框的值，而只是检查值，所以我不明白为什么它会干扰第一个功能。 / p>

谢谢您的帮助。

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>

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

2 个答案: