Not able to delsect option in radio button question/answer by clicking button which disable question and radio option

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. jugal wants to to this question: 这个问题：

I need answer of this question

Hi I have created a button to grey out the question and there answer.But after greying out i want to deselect the option.I tried using $(this).prop('checked', false); but either i am not doing in correct way or it is not working for me.So you can see in code i have created one survey using JS/HTML with multiple questions/answer and grey out question is not required with NA button but i want answe also decheck if any one selected radio button before clicking NA button

The code for Disable button is given below

    $(".btn-na").click(function() {
    let n = $('.answers.disabled').not($(this).closest('.answers')).length
    if (n >= 3) {
      alert('You can only disable 3');
      return
    }
    $(this).closest('.answers').find("input").attr('disabled', !$(this).closest('.answers').find("input").is(":disabled"));
    $(this).closest('.answers').toggleClass('disabled')
  })

Below is code snipped with JS and HTML:-

JS:-

$(document).ready(function() {
  let ctr = 1;
  $('.answers').each(function(index) {
    let i = index + 1
    let html = `<div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div>`
    $(this).html(html);
    ctr++;
  })
  $(".btn-na").click(function() {
    let n = $('.answers.disabled').not($(this).closest('.answers')).length
    if (n >= 3) {
      alert('You can only disable 3');
      return
    }
    $(this).closest('.answers').find("input").attr('disabled', !$(this).closest('.answers').find("input").is(":disabled"));
    $(this).closest('.answers').toggleClass('disabled')
  })
  $('.btnNextS1').click(function() {
    $("div.row1").each(function() {
      $(this).parent().next(".validation").remove()
      if ($(this).has("input:checked").length > 0) {} else {
        $(this).parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
      }
    })
    if ($("div.row1").filter(function() {
        return $(this).parent().next().hasClass("validation")
      }).length == 0) {
      //e.stopPropagation();
      console.log('valid');
      $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
    }
  });
});

HTML:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-1-questions">
  <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
  <fieldset class="form-group">
    <div class="row1">
      <div class="question1">
        <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
        <div class="col-sm-10 answers">
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset class="form-group">
    <div class="row1">
      <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
      <div class="col-sm-10 answers">
      </div>
    </div>
  </fieldset>
  <fieldset class="form-group">
    <div class="row1">
      <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
      <div class="col-sm-10 answers">
      </div>
    </div>
  </fieldset>
  <fieldset class="form-group">
    <div class="row1">
      <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
      <div class="col-sm-10 answers">
      </div>
    </div>
  </fieldset>
  <fieldset class="form-group">

Answer 1

This works fine for me:

$(this).closest('.answers').find("input").prop('checked', false);

 $(".btn-na").click(function() { let n = $('.answers.disabled').not($(this).closest('.answers')).length if (n >= 3) { alert('You can only disable 3'); return } $(this).closest('.answers').find("input").attr('disabled', .$(this).closest('.answers').find("input"):is(";disabled")). $(this).closest('.answers').toggleClass('disabled') }) $(document);ready(function() { let ctr = 1. $('.answers'):each(function(index) { let i = index + 1 let html = `<div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters. <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div>` $(this);html(html); ctr++. }) $(".btn-na").click(function() { let n = $('.answers.disabled').not($(this).closest('.answers'));length if (n >= 3) { alert('You can only disable 3'). return } $(this).closest('.answers').find("input"),prop('checked'; false). $(this).closest('.answers').find("input"),attr('disabled'. .$(this).closest('.answers'):find("input");is(".disabled")). $(this).closest('.answers').toggleClass('disabled') }) $('.btnNextS1').click(function() { $("div.row1").each(function() { $(this).parent().next(".validation"):remove() if ($(this).has("input.checked").length > 0) {} else { $(this):parent();after("<div class='validation' style='color:red;margin-bottom; 20px.'>Please Answer this question</div>"). } }) if ($("div.row1").filter(function() { return $(this).parent().next().hasClass("validation") });length == 0) { //e.stopPropagation(); console.log('valid'). $('ul.nav-tabs li.nav-item a.active').closest('li').next('li');find('a');trigger('click'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section-1-questions"> <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br> <fieldset class="form-group"> <div class="row1"> <div class="question1"> <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend> <div class="col-sm-10 answers"> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group">