Convert radio button to reade-only (not disable) with JS or JQ

Question

I have a parameter with three input choices as radio buttons (e.g. "Yes"; "No"; "NA"). I want to make one of the radio buttons (e.g. for NA) as Read-only (not disable) using JS or Jquery without changing the original HTML code. Can anyone help me?

<fieldset class="form-group radio_buttons optional question_1">
  <div class="form-check">
    <input id="question_1_1" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_1">Yes</label>
  </div>
  <div class="form-check">
    <input id="question_1_2" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_2">No</label>
  </div>
  <div class="form-check">
    <input id="question_1_3" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_3">NA</label>
  </div>
</fieldset>

refer https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly for detailed explanation — Nazifha, Apr 01 '21 at 09:36
Thanks. I have already tested the "onclick="this.checked = false" but not working for me. Disable is not an option for my task. — moh19814, Apr 01 '21 at 09:39
with readonly, I mean that the radio button (NA) is displayed but no clickable. It should not also be disabled as it's value need to be recorded in database. — moh19814, Apr 01 '21 at 10:43
So, there should be three buttons displayed regardless of what is selected. What i want to do, is to prevent miss-click event. That's means, user can see the three options, but only can select either Yes or No. NA should not be clickable. — moh19814, Apr 01 '21 at 10:46
@moh19814, and you want to save NA in db is user doesn't click anything? if so, can we pre checked the NA option on load? — Rahul R., Apr 01 '21 at 11:54

score 0 · Answer 1 · answered Apr 01 '21 at 11:48

<html>
  <body>
  <fieldset class="form-group radio_buttons optional question_1">
  <div class="form-check">
    <input id="question_1_1" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_1">Yes</label>
  </div>
  <div class="form-check">
    <input id="question_1_2" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_2">No</label>
  </div>
  <div class="form-check">
    <input id="question_1_3" class="form-check-input"  onmouseover="setValue(this)" onclick="retainValue(this)" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_3">NA</label>
  </div>
</fieldset>
   
    <script>
      var checkboxes = {};
      function setValue(el) {
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
      }
      function retainValue(el) {
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
        el.checked = checkboxes[el.id];
      }
    </script>
  </body>
</html>

Thank you a lot for the answer. One question still: can Pass the (onmouseover="setValue(this)" onclick="retainValue(this)") with JS or JQ. For example: $("question_1_3").CSS(onmouseover="setValue(this)" onclick="retainValue(this)") This is not working! I am trying to do so, because I am not allowed to edit the html code; so i have to pass the property through JS. Any Idea? — moh19814, Apr 01 '21 at 15:12
or through something like that: $j('#question_1_3' ).trigger( 'mouseenter' ); — moh19814, Apr 01 '21 at 15:18

score 0 · Answer 2 · answered Apr 02 '21 at 04:31

This should work as per your requirement

$(document).ready(function(){
  $('#question_1_3').on("click", function(){
    $(this).prop("checked", false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html>
  <body>
  <fieldset class="form-group radio_buttons optional question_1">
  <div class="form-check">
    <input id="question_1_1" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_1">Yes</label>
  </div>
  <div class="form-check">
    <input id="question_1_2" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_2">No</label>
  </div>
  <div class="form-check">
    <input id="question_1_3" class="form-check-input"   type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_3">NA</label>
  </div>
</fieldset>
  </body>
</html>

Convert radio button to reade-only (not disable) with JS or JQ

2 Answers2