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

Я мало работал с формами и пытаюсь заставить эту форму иметь возможность выбирать более 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>


forms html jquery
person user8758206    schedule 03.03.2019    source источник
comment
Когда форма отправляется обратно самой себе, по сути, страница снова загружается в исходное состояние, поэтому вам нужно иметь код, который при загрузке страницы считывает эти значения, чтобы вы могли обновить отображение. Используете ли вы для этого какой-либо серверный язык?   -  person Doug F    schedule 03.03.2019
comment
Я только что закомментировал строку отправки формы, но она по-прежнему делает то же самое. Для этого нет серверного языка, это просто тест.   -  person user8758206    schedule 03.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

Обновить

В соответствии с запросом радиокнопки теперь будут функционировать как флажки, поэтому, если щелкнуть их, когда они нажаты, они перестанут быть нажатыми. Это все в $('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>

person Doug F    schedule 03.03.2019
comment
спасибо, это очень полезно! И увидеть вашу версию в сравнении с моей. Только одно: возможно ли сделать так, чтобы всякий раз, когда нажимается переключатель, можно было щелкнуть его снова, чтобы отменить выбор? в остальном ваше решение идеально! - person user8758206; 03.03.2019
comment
Конечно, но для того типа взаимодействия, который вы описываете, почему бы не использовать флажок? У вас есть 3 переключателя, которые можно отметить одновременно, поэтому я немного озадачен тем, почему вы используете переключатели вместо флажков. - person Doug F; 03.03.2019
comment
это очень хороший момент. Мне было поручено использовать радиокнопки, так это действительно возможно? Однако я подниму вопрос об использовании флажков. Весь этот вопрос и демонстрация на самом деле являются практикой в ​​​​моё время для новой работы. - person user8758206; 03.03.2019
comment
Лично я бы выбрал флажки, но я обновил свой код, чтобы показать, как заставить переключатели работать как флажки, так что вы защищены. - person Doug F; 03.03.2019