Question

我会请求帮助在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完成的工作。谢谢。

Answer 1

我认为这就是你要找的东西谢谢你提出的问题。

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; }
      }
    }
  }

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

1 个答案: