保存进度 - 绕过必填字段

Question

我有一个包含不同类型输入的表单，其中包括几个具有 required 属性的单选按钮。我正在尝试添加一个“保存进度”链接，单击该链接将覆盖所需的属性（通过选择一个选项）并提交表单。为了实现此目的，我向所有单选按钮添加了另一个选择 (N/A)。在 jquery 的帮助下，该选择变得不可见。单击提交链接时，应该选择所有没有选择的单选按钮并将它们设置为“N/A”选项，然后提交表单。返回表单（页面加载时）后，所有选择“N/A”的单选按钮都将取消选择。

至少这是它应该工作的方式。实际发生的情况是所有单选按钮最终都被取消选择。即使是那些选择了“N/A”以外的选项的人。

下面是我当前使用的代码：

// On page load, hide the 'N/A' choice for all radio buttons
$('input[type=radio][value="N/A"]').hide().parent().hide();

// On page load, uncheck/unset all radio buttons that have 'N/A' selected
$('input[type=radio][value="N/A"]').each(function() {
    //var selectedValue = $('input[name="survey"]:checked').val();
    //$(this).val("");
    $(this).prop("checked",false);
     
});

// When 'quick save' button is clicked, set value of all unslected radio buttons to 'N/A' (to override required attribute) and submit.
$(document).on('click', '.qksv', function() {   
    $('input[type=radio]:not(:checked)').each(function() {
        //if(this.checked == false) {
            $(this).val("N/A");
                $(this).prop('checked',true);
                //$(this).attr("required", false);              
        //}
    });
    $(this).submit();       
});

我做错了什么？即使我注释掉页面加载时触发的那两段代码，我也会得到相同的结果。

Answer 1

我不知道你的逻辑上下文，但似乎

N/A

选项基本上是默认选项？

<div class="question">
  <p>Question 1</p>
  <label><input type="radio" name="q1" value="Yes"> Yes</label>
  <label><input type="radio" name="q1" value="No"> No</label>
  <input type="radio" name="q1" value="N/A" checked hidden> <- just make it default and hidden?
</div>

如果您仍然想继续..我认为这部分代码没有达到您的预期：

// this will just select all radio inputs that are not checked
// ignoring the ones that are actually checked...
$('input[type=radio]:not(:checked)').each(function() {
  //if(this.checked == false) {
    $(this).val("N/A"); // careful, this will potentially override the values of all your inputs!
    $(this).prop('checked',true); // here you're just checking all of them?
    //$(this).attr("required", false);              
  //}
});

如果我理解的话，我想你真正想要的可能是这样的：

// [on quick save function]

// 1. group your radio inputs by name:
const groups = new Set(
  $("input:radio")
    .get()
    .map((el) => el.name)
);

// 2. now, for each radio group...
groups.forEach((name) => {
  const group = $(`input:radio[name=${name}]`);
  // if a given group doesn't have a selection...
  if (!group.is(":checked")) {
    // check the N/A option for this group before submit
    group.filter('[value="N/A"]').prop("checked", true);
  }
});
...