寻找复选框启用-禁用编码技术:减少JavaScript代码的技巧

Looking for checkbox enable-disable coding techniques: tips to reduce JavaScript code

本文关键字:JavaScript 减少 代码 技术 启用 复选框 编码 寻找      更新时间:2023-09-26

我会请求帮助在Javascript中编码以下限制,但以更优化的方式,因为我的方式很长。

我想做的是标记2个复选框选项,然后禁用剩余的

<form>
  <div>
  <input type="checkbox" id="a" name="question1">a) Java <br>
  <input type="checkbox" id="b" name="question1">b) C <br>
  <input type="checkbox" id="c" name="question1">c) C++  <br>
  <input type="checkbox" id="d" name="question1">d) C#  <br>
  </div>
</form> 

这是可以改进的JavaScript代码,它按照我的方式工作,但我不喜欢,我认为它的代码太多了。

addEventListener('load',compruebacheck,false);  
    function compruebacheck(){
        document.getElementById('a').onchange = function() {
            if (document.getElementById('b').checked) 
            {
                document.getElementById('c').disabled = this.checked;
                document.getElementById('d').disabled = this.checked;
            }
            if (document.getElementById('c').checked) 
            {
                document.getElementById('b').disabled = this.checked;
                document.getElementById('d').disabled = this.checked;
            }
            if (document.getElementById('d').checked) 
            {
                document.getElementById('b').disabled = this.checked;
                document.getElementById('c').disabled = this.checked;
            }
        };
        document.getElementById('b').onchange = function() {
            if (document.getElementById('a').checked) 
            {
                document.getElementById('c').disabled = this.checked;
                document.getElementById('d').disabled = this.checked;       
            }
            if (document.getElementById('c').checked) 
            {
                document.getElementById('a').disabled = this.checked;
                document.getElementById('d').disabled = this.checked;                   
            }
            if (document.getElementById('d').checked) 
            {
                document.getElementById('a').disabled = this.checked;
                document.getElementById('c').disabled = this.checked;                   
            }
        };
        document.getElementById('c').onchange = function() {
            if (document.getElementById('a').checked) 
            {
                document.getElementById('b').disabled = this.checked;
                document.getElementById('d').disabled = this.checked;
            }
            if (document.getElementById('b').checked) 
            {
                document.getElementById('a').disabled = this.checked;
                document.getElementById('d').disabled = this.checked;
            }
            if (document.getElementById('d').checked) 
            {
                document.getElementById('a').disabled = this.checked;
                document.getElementById('b').disabled = this.checked;           
            }               
        };
        document.getElementById('d').onchange = function() {
            if (document.getElementById('a').checked)
            {
                document.getElementById('b').disabled = this.checked;
                document.getElementById('c').disabled = this.checked;
            }
            if (document.getElementById('b').checked) 
            {
                document.getElementById('a').disabled = this.checked;
                document.getElementById('c').disabled = this.checked;
            }
            if (document.getElementById('c').checked) 
            {
                document.getElementById('a').disabled = this.checked;
                document.getElementById('b').disabled = this.checked;
            }
        };
    }

很抱歉给您带来的不便,但我刚开始学习JavaScript,对于我在这门语言中的一点经验,我想不出更好的技术,我会感谢一些替代方法来找到可以使用JavaScript完成的事情。谢谢你。

我想这就是你要找的。
谢谢你的问题。

addEventListener('load',compruebacheck,false);
function compruebacheck() {
  document.getElementById('a').onchange = function() { func1(); }
  document.getElementById('b').onchange = function() { func1(); }
  document.getElementById('c').onchange = function() { func1(); }
  document.getElementById('d').onchange = function() { func1(); }
  func1();
  function func1() {
    var count4 = 
    (document.getElementById('a').checked ? 1 : 0) + 
    (document.getElementById('b').checked ? 1 : 0) + 
    (document.getElementById('c').checked ? 1 : 0) + 
    (document.getElementById('d').checked ? 1 : 0);
    document.getElementById('a').disabled = false; 
    document.getElementById('b').disabled = false; 
    document.getElementById('c').disabled = false; 
    document.getElementById('d').disabled = false; 
    if (count4 == 2) {
      if (!document.getElementById('a').checked) { document.getElementById('a').disabled = true; }
      if (!document.getElementById('b').checked) { document.getElementById('b').disabled = true; }
      if (!document.getElementById('c').checked) { document.getElementById('c').disabled = true; }
      if (!document.getElementById('d').checked) { document.getElementById('d').disabled = true; }
      }
    }
  }