jQuery实现单选框选中时关联HTML5表单字段设为必填项失败排查

我看了你代码里的问题啦，主要是jQuery的attr()方法使用不正确，还有只处理了Business类型的单选按钮，没覆盖其他需要动态必填的字段，另外也没考虑页面初始化时的状态。咱们一步步来修正：

问题根源 #

你写的$('#bizName').attr('required');其实是在获取这个属性的值，而不是设置它。对于布尔类型的HTML属性（比如required），jQuery推荐用prop()方法来设置，因为attr()更适合处理字符串类型的属性值。

修正后的完整JS代码 #

var $form = $('form#bookingForm'), 
    url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec';

// 通用函数：根据单选按钮状态设置关联字段的必填性
function toggleRequiredFields(radio, targetSelectors) {
  var isChecked = $(radio).is(':checked');
  $(targetSelectors).each(function() {
    if (isChecked) {
      $(this).prop('required', true);
    } else {
      $(this).removeProp('required');
      // 可选：清除字段值，避免提交空值
      $(this).val('');
    }
  });
}

// 初始化页面时检查已选中的单选按钮，设置对应字段
$(document).ready(function() {
  // 检查Craft单选按钮
  if ($('#stallType-Craft').is(':checked')) {
    toggleRequiredFields('#stallType-Craft', '#craftName');
  }
  // 检查Business单选按钮
  if ($('#stallType-Business').is(':checked')) {
    toggleRequiredFields('#stallType-Business', '#bizName, input[name="insurance"]');
  }
});

// 绑定Stall Type单选按钮的change事件
$('#stallType-Craft').change(function() {
  toggleRequiredFields(this, '#craftName');
});

$('#stallType-Business').change(function() {
  toggleRequiredFields(this, '#bizName, input[name="insurance"]');
});

$('#stallType-Preloved').change(function() {
  // 如果需要Preloved的关联字段也处理，这里可以添加
  // toggleRequiredFields(this, '对应的选择器');
});

$('#submit-form').on('click', function(e) {
  var valid = this.form.checkValidity();
  if (valid) {
    e.preventDefault();
    var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: $form.serializeObject(),
      success: function () {
        $('#redirect_page').modal('show');
        window.setTimeout(function () { location.reload() }, 3000);
      }
    });
  }
});

关键改进点 #

• 使用prop('required', true)来正确设置必填属性，removeProp('required')移除它，这是处理布尔属性的正确方式。
• 封装了通用函数toggleRequiredFields，方便复用在多个单选按钮组上，减少重复代码。
• 增加了页面初始化时的检查，确保如果页面刷新后单选按钮处于选中状态，对应的字段会自动变成必填。
• 覆盖了Craft和Business两种类型的所有关联字段（包括Business的insurance单选组）。
• 可选添加了清除字段值的逻辑，避免用户之前填写了内容但切换单选按钮后提交空的必填字段。

这样修改后，当你选中对应的stallType单选按钮时，关联的文本框或单选组就会自动加上required属性，表单提交时会正确验证这些字段啦。

内容的提问来源于stack exchange，提问作者Luke