jQuery кнопка отправки формы переходит на URL в зависимости от установленного флажка

Question

У меня есть простая контактная форма с несколькими флажками, когда пользователь выбирает флажок, он должен go к URL / папке, привязанной к URL, который находится в значении. В настоящее время проблема заключается в том, что после того, как пользователь установил флажок и нажал кнопку «Отправить», затем возвращается на эту страницу, и флажок сбрасывается, кнопка «Отправить» по-прежнему переводит их в ранее выбранный флажок.

Требуется способ полного сброса Сформируйте и отключите кнопку, чтобы представление не было слишком запутанным для пользователя. Спасибо!

Вот мой код формы:

<form name="frm" id="myForm" method="post" >
  <div class="provider-checkboxes">
    <input type="checkbox" name="rGroup" id="r1" value="folder-1/" onclick="formaction(this)"/>
    <label class="check-div" for="r1">Label 1</label>
    <input type="checkbox" name="rGroup" id="r2" value="folder-2/" onclick="formaction(this)"/>
    <label class="check-div" for="r2">Label 2</label>
    <input type="checkbox" name="rGroup" id="r3" value="folder-3/" onclick="formaction(this)"/>
    <label class="check-div" for="r3">Label 3</label>
    <button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>
  </div>
</form>

Вот скрипт:

$(document).ready(function(){
  $('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
});

$('[data-toggle="btns"] .btn').on('click', function(){
  var $this = $(this);
  $this.parent().find('.active').removeClass('active');
  $this.addClass('active');
});

$('.selectme input:checkbox').click(function() {
  $('.selectme input:checkbox').not(this).prop('checked', false);
});  

$('.provider-checkboxes input:checkbox').click(function() {
  $('.provider-checkboxes input:checkbox').not(this).prop('checked', false);
}); 

function formaction(checkbox){
  document.getElementById("myForm").action = checkbox.value;;
}

function UncheckAll(){ 
  var w = document.getElementsByTagName('input'); 
  for(var i = 0; i < w.length; i++){ 
    if(w[i].type=='checkbox'){ 
      w[i].checked = false; 
    }
  }
}

Answer 1

Рассмотрим следующий код. Думаю, это поможет, основываясь на том, что вы поделились.

$(function() {
  function setFormAction(frm, a) {
    frm.attr("action", a);
  }

  function unCheckAll() {
    $("input[type='checkbox']").prop("checked", false);
    $(".provider-checkboxes .btn").hide();
  }

  $('.provider-checkboxes input:checkbox').click(function() {
    unCheckAll();
    $(this).prop("checked", true);
    $(".provider-checkboxes .btn").toggle(300);
    setFormAction($("#myForm"), "./" + $(this).val());
    console.log($("#myForm")[0]);
  });

  unCheckAll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frm" id="myForm" method="post">
  <div class="provider-checkboxes">
    <input type="checkbox" name="rGroup" id="r1" value="folder-1/" />
    <label class="check-div" for="r1">Label 1</label>
    <input type="checkbox" name="rGroup" id="r2" value="folder-2/" />
    <label class="check-div" for="r2">Label 2</label>
    <input type="checkbox" name="rGroup" id="r3" value="folder-3/" />
    <label class="check-div" for="r3">Label 3</label>
    <button type="submit" class="btn btn-primary btn-lg btn-block">Next</button>
  </div>
</form>