提交后不会禁用单选按钮，也无法取消选择所选的单选按钮

Question

我没有使用太多表格，而是试图使该表格每次可以选择多个单选按钮（目前可以选择，但是如果已经选择，则不能取消选择它）然后提交选中收音机的行（如果有意义）。然后，一旦提交了一行，就无法选择该行的单选输入。

不知道为什么，但是在单击“提交”之后，并没有添加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>