Skip to content Skip to sidebar Skip to footer

Disabling Radio Button Based On User Selection

I have 2 sets of radio buttons with 4 options each. These 4 options are the same in both categories. I do not want to allow same selection to be possible in both categories. For ex

Solution 1:

First enable all radio buttons, then disable the one you would like to disable:

$("input[type=radio]").click(function() {
  console.log("here")
  $("input[type=radio]").removeAttr("disabled");
  $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled");
  $(this).removeAttr("disabled");
});
table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ccc;
  padding: 10px;
}

th:empty {
  border: 0;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table><tr><th>Most Supportive</th><th>Reddit comment</th><th>Most Offensive</th></tr><tr><td><inputtype="radio"name="Most1"id="Most-1a"data-min-check="1"requiredvalue="a"data-col="1"></td><td>Comment 1</td><td><inputtype="radio"name="Least1"id="Least-1a"data-min-check="1"requiredvalue="a"data-col="1"></td></tr><tr><td><inputtype="radio"name="Most1"id="Most-1b"data-min-check="1"requiredvalue="b"data-col="2"></td><td>Comment 2</td><td><inputtype="radio"name="Least1"id="Least-1b"data-min-check="1"requiredvalue="b"data-col="2"></td></tr><tr><td><inputtype="radio"name="Most1"id="Most-1c"data-min-check="1"requiredvalue="c"data-col="3"></td><td>Comment 3</td><td><inputtype="radio"name="Least1"id="Least-1c"data-min-check="1"requiredvalue="c"data-col="3"></td></tr><tr><td><inputtype="radio"name="Most1"id="Most-1d"data-min-check="1"requiredvalue="d"data-col="4"></td><td>Comment 4</td><td><inputtype="radio"name="Least1"id="Least-1d"data-min-check="1"requiredvalue="d"data-col="4"></td></tr></table>

Post a Comment for "Disabling Radio Button Based On User Selection"