Радио-кнопки не отключаются после отправки и не могут отменить выбор выбранных радио-кнопок

Question

Я не очень много работал с формами и пытаюсь заставить эту форму выбирать более 1 переключателя за раз (что он в настоящее время может, но вы не можете отменить выбор, если он уже выбран), а затем отправитьстроки с выбранными радио (если это имеет смысл).И затем, после того как строка была отправлена, вы не сможете выбрать радиовход для этой строки.

Не знаю почему, но переключатели, которые были выбраны до нажатия кнопки "Отправить", не добавляются disabled='disabled'атрибут после нажатия кнопки отправить.Кто-нибудь знает почему?И как это можно исправить?

Спасибо за любую помощь здесь.

function submitForm() {
  var radioOne = $("#one"),
      radioTwo = $("#two"),
      radioThree = $("#three"),
      theForm = $("#theForm");
  
  alert('Form will submit');
  //theForm.submit();

  if (radioOne.checked = true) {
    radioOne.attr('disabled','disabled');
  }

  if (radioTwo.checked = true) {
    radioTwo.attr('disabled','disabled');
  }

  if (radioThree.checked = true) {
    radioThree.attr('disabled','disabled');
  }
}

div {
  display: flex;
  flex-flow: row norwap;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  margin-bottom: 10px;
}
button {
  margin: 0 auto;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id='theForm'>
  <div>
    <p>Detail 1</p>
    <p>Detail 2</p>
    <input type="radio" name="one" id="one" value="one" /><label for="one">One</label>
  </div>

  <div>
    <p>Detail 1</p>
    <p>Detail 2</p>
    <input type="radio" name="two" id="two" value="two" /><label for="two">Two</label>
  </div>

  <div>
    <p>Detail 1</p>
    <p>Detail 2</p>
    <input type="radio" name="three" id="three" value="three" /><label for="three">Three</label>
  </div>

  <button onclick='submitForm()'>Submit</button>
</form>

Answer 1

Попробуй это.Я изменил некоторые вещи, но это должно делать то, что вы хотите.Но когда я просмотрел код, вашей самой большой ошибкой была проверка на равенство с "=", когда должно быть "==" или "===".

Обновление

В соответствии с запросом переключатели теперь будут работать как флажки, поэтому, нажимая их, когда они нажимаются, они становятся не нажатыми.Это все в $ ('input [type = "radio"]'). Click

$("button").click(function (e) {
  e.preventDefault();
  var radioOne = $("#one"),
      radioTwo = $("#two"),
      radioThree = $("#three"),
      theForm = $("#theForm");
  
  alert('Form will submit');
  //theForm.submit();

  if (radioOne.is(":checked")) {
    radioOne.attr('disabled','disabled');
  }

  if (radioTwo.is(":checked")) {
    radioTwo.attr('disabled','disabled');
  }

  if (radioThree.is(":checked")) {
    radioThree.attr('disabled','disabled');
  }
});

$('input[type="radio"]').click(function () {
  var $this = $(this);
  var isChecked = $this.attr('isChecked');
  if (isChecked == 'true'){
    $this.attr('isChecked', 'false');
    $this.prop("checked", false);
  } else {
    $this.attr('isChecked', 'true');
  }
});

div {
  display: flex;
  flex-flow: row norwap;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  margin-bottom: 10px;
}
button {
  margin: 0 auto;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id='theForm'>
  <div>
    <p>Detail 1</p>
    <p>Detail 2</p>
    <input type="radio" name="one" id="one" value="one" /><label for="one">One</label>
  </div>

  <div>
    <p>Detail 1</p>
    <p>Detail 2</p>
    <input type="radio" name="two" id="two" value="two" /><label for="two">Two</label>
  </div>

  <div>
    <p>Detail 1</p>
    <p>Detail 2</p>
    <input type="radio" name="three" id="three" value="three" /><label for="three">Three</label>
  </div>

  <button>Submit</button>
</form>