Radio buttons aren't disabled after submission & cannot unselect selected radio buttons

Question

I haven't worked with forms much and am trying to get this form to be able to select more than 1 radio button per time (which it currently can, but you then cannot unselect one if it's already selected) and then submit the rows with radios selected (if that makes sense). And then once a row has been submitted, be then unable to select the radio input for that row.

Not sure why, but the radio buttons that are selected before clicking submit aren't then added the disabled='disabled' attribute after clicking submit. Does anyone know why? And how can it be fixed?

Thanks for any help here.

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>

When a form submits back to itself, essentially the page is loading again back to the original state, so what you have to do is have code that, when the page loads, reads these values so you can update the display. Are you using any server-side language for this? — Doug F
I've just commented out the form submit line for now, but it still does the same. There's no server-side language for this and is just a test — user8758206

Doug F Doug F · Accepted Answer · 2019-03-03T15:50:44

Try this. I've changed around some things but this should do what you want. But as I went over the code, your biggest mistake was checking for equality with "=" when it should be "==" or "===".

Update

As requested, radio buttons will now function like checkboxes so by clicking them when they're clicked, they will then become unclicked. This is all in $('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>

Radio buttons aren't disabled after submission & cannot unselect selected radio buttons

1 Answers