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, но если пользователь выбирает 1m значение A, то 1s значение A необходимо отключить, но включить снова, когда пользователь выбирает другое значение из 1m, а также другоенаоборот, когда пользователь сначала выбирает 1s значение C, он должен отключить 1m C.Также этот код ужасен и должен быть более простым способом для этого.Любая помощь очень ценится!

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>