js在选择其他选项时禁用单选选项

Question

我有24个问题，有4个选项（a，b，c，d），用户需要选择最适合他且最不适合的选项。一切正常。现在需要使用JS来创建用户无法选择相同答案的情况。

到目前为止，我尝试了以下代码：

function radioChange(radioSet, radioButton, radioArray) {

  if (radioSet.substring(radioSet.length - 1) == "s") {
    radioSet.replace(/\s$/, 'm');
  }
  if (radioSet.substring(radioSet.length - 1) == "m") {
    radioSet.replace(/\m$/, 's');
  }
  if (radioArray[0] == null) {
    radioArray[0] = radioButton;
    document.getElementsByName(radioSet)[0].disabled = true;
  } else {
    radioArray[0] = radioButton;
    document.getElementsByName(radioSet)[0].disabled = false;
  }

}
var radioArray = [null];

<!--
this is the html I use : (and tested it just for the first 2 options, but it needs for all the 24 questions)
-->
<div class="dt">
  <div class="dtb">
    <div class="dtr">
      <div class="one">1</div>
      <div class="two">a</div>
      <div class="three"><input name="1m" onclick="radioChange('1m','a',radioArray);" type="radio" value="a" required /></div>
      <div class="four"><input name="1s" onclick="radioChange('1s','a',radioArray);" type="radio" value="a" required /></div>
      <div class="five">Aardig, vriendelijk</div>
    </div>
    <div class="dtr">
      <div class="one">&nbsp;</div>
      <div class="two">b</div>
      <div class="three"><input name="1m" onclick="radioChange('1m','b',radioArray);" type="radio" value="b" required /></div>
      <div class="four"><input name="1s" onclick="radioChange('1s','b',radioArray);" type="radio" value="b" required /></div>
      <div class="five">Overtuigend, overredend</div>
    </div>
    <div class="dtr">
      <div class="one">&nbsp;</div>
      <div class="two">c</div>
      <div class="three"><input name="1m" type="radio" value="c" required /></div>
      <div class="four"><input name="1s" type="radio" value="c" required /></div>
      <div class="five">Terughoudend, bescheiden, gereserveerd</div>
    </div>
    <div class="dtr">
      <div class="one">&nbsp;</div>
      <div class="two">d</div>
      <div class="three"><input name="1m" type="radio" value="d" required /></div>
      <div class="four"><input name="1s" type="radio" value="d" required /></div>
      <div class="five">Origineel, inventief, individualistisch</div>
    </div>
  </div>
</div>

<div class="dt">
  <div class="dtb">
    <div class="dtr">
      <div class="one">2</div>
      <div class="two">a</div>
      <div class="three"><input name="2m" type="radio" value="a" required /></div>
      <div class="four"><input name="2s" type="radio" value="a" required /></div>
      <div class="five">Charmant, attractief, trekt anderen aan</div>
    </div>
    <div class="dtr">
      <div class="one">&nbsp;</div>
      <div class="two">b</div>
      <div class="three"><input name="2m" type="radio" value="b" required /></div>
      <div class="four"><input name="2s" type="radio" value="b" required /></div>
      <div class="five">Co&ouml;peratief, aangenaam</div>
    </div>
    <div class="dtr">
      <div class="one">&nbsp;</div>
      <div class="two">c</div>
      <div class="three"><input name="2m" type="radio" value="c" required /></div>
      <div class="four"><input name="2s" type="radio" value="c" required /></div>
      <div class="five">Koppig, onbuigzaam</div>
    </div>
    <div class="dtr">
      <div class="one">&nbsp;</div>
      <div class="two">d</div>
      <div class="three"><input name="2m" type="radio" value="d" required /></div>
      <div class="four"><input name="2s" type="radio" value="d" required /></div>
      <div class="five">Lief, innemend</div>
    </div>
  </div>
</div>

它仅适用于初始选择，但不适用于用户再次更改的情况，并且需要禁用具有该值的输入字段，因为它们都被命名为1m，但是如果用户选择了{需要先禁用{1}}值1m，然后禁用A值1s，但是当用户从A中选择了不同的值时，又要再次启用，反之亦然，当用户首先选择1m值1s时，需要禁用C 1m。这段代码也很可怕，应该是一种更简单的方法。任何帮助都非常感谢！

Answer 1

您需要非常注意无线电名称和值。我已经 可选地 更新了您的姓名和值以及 功能以获取所选值 ，请看演示下面-

function handleClick(event) {
    event.preventDefault();
    // Get all the inputs.
    var inputs = form1.elements;
    var radios = [];

    //Loop and find only the Radios
    for (var i = 0; i < inputs.length; ++i) {
        if (inputs[i].type == 'radio') {
            radios.push(inputs[i]);
        }
    }

    //var found = 1;
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            console.log(radios[i].value);
            //found = 0;
            //break;
        }
    }

    return false; // prevent further bubbling of event
}

<form name="form1" onsubmit='handleClick(event)'>
    <div class="dt">
        <div class="dtb">
            <div class="dtr">
                <div class="one">1</div>
                <div class="two">a</div>
                <div class="three"><input name="a" type="radio" value="1m" required /></div>
                <div class="four"><input name="a" type="radio" value="1s" required /></div>
                <div class="five">Aardig, vriendelijk</div>
            </div>
            <div class="dtr">
                <div class="one">&nbsp;</div>
                <div class="two">b</div>
                <div class="three"><input name="b" type="radio" value="1m" required /></div>
                <div class="four"><input name="b" type="radio" value="1s" required /></div>
                <div class="five">Overtuigend, overredend</div>
            </div>
            <div class="dtr">
                <div class="one">&nbsp;</div>
                <div class="two">c</div>
                <div class="three"><input name="c" type="radio" value="1m" required /></div>
                <div class="four"><input name="c" type="radio" value="1s" required /></div>
                <div class="five">Terughoudend, bescheiden, gereserveerd</div>
            </div>
            <div class="dtr">
                <div class="one">&nbsp;</div>
                <div class="two">d</div>
                <div class="three"><input name="d" type="radio" value="1m" required /></div>
                <div class="four"><input name="d" type="radio" value="1s" required /></div>
                <div class="five">Origineel, inventief, individualistisch</div>
            </div>
        </div>
    </div>
    <div class="dt">
        <div class="dtb">
            <div class="dtr">
                <div class="one">2</div>
                <div class="two">a</div>
                <div class="three"><input name="a2" type="radio" value="2m" required /></div>
                <div class="four"><input name="a2" type="radio" value="2s" required /></div>
                <div class="five">Charmant, attractief, trekt anderen aan</div>
            </div>
            <div class="dtr">
                <div class="one">&nbsp;</div>
                <div class="two">b</div>
                <div class="three"><input name="b2" type="radio" value="2m" required /></div>
                <div class="four"><input name="b2" type="radio" value="2s" required /></div>
                <div class="five">Co&ouml;peratief, aangenaam</div>
            </div>
            <div class="dtr">
                <div class="one">&nbsp;</div>
                <div class="two">c</div>
                <div class="three"><input name="c2" type="radio" value="2m" required /></div>
                <div class="four"><input name="c2" type="radio" value="2s" required /></div>
                <div class="five">Koppig, onbuigzaam</div>
            </div>
            <div class="dtr">
                <div class="one">&nbsp;</div>
                <div class="two">d</div>
                <div class="three"><input name="d2" type="radio" value="2m" required /></div>
                <div class="four"><input name="d2" type="radio" value="2s" required /></div>
                <div class="five">Lief, innemend</div>
            </div>
        </div>
    </div>
    <input type="submit" value="Submit" />
    <input type="reset" value="reset" />
</form>