如何用JavaScript/jQuery将指定复选框设置为必填项？

首先得说清楚你之前代码的问题：$('input[id^="OrderLiveOrder_"]').required这种写法是错误的——required是DOM元素的属性，而你调用的是jQuery对象的属性，jQuery对象本身并没有这个属性，所以自然不会生效。

下面给你两种可行的解决方案，结合属性设置和表单提交验证，确保用户必须勾选：

方案1：添加required属性+表单提交拦截验证 #

这种方法既给复选框添加原生的required属性，又手动监听表单提交做二次验证（避免第三方表单不识别自定义添加的required属性）：

// 1. 定位目标复选框并添加required属性
const targetCheckbox = $('input[id^="OrderLiveOrder_"]');
targetCheckbox.prop('required', true);

// 2. 找到该复选框所在的表单，监听提交事件
const parentForm = targetCheckbox.closest('form');
parentForm.on('submit', function(e) {
  // 检查复选框是否被勾选
  if (!targetCheckbox.is(':checked')) {
    e.preventDefault(); // 阻止表单提交
    // 这里可以替换成更符合页面风格的提示方式，比如插入提示文本
    alert('请勾选该必填选项后再提交');
    // 让页面滚动到复选框位置，方便用户操作
    targetCheckbox[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
});

方案2：直接操作DOM元素设置required属性 #

如果你更习惯原生JS的写法，也可以直接获取DOM元素来设置：

// 获取DOM元素
const checkboxElement = document.querySelector('input[id^="OrderLiveOrder_"]');
// 设置required属性
checkboxElement.required = true;

// 同样监听表单提交做验证
const parentForm = checkboxElement.closest('form');
parentForm.addEventListener('submit', function(e) {
  if (!checkboxElement.checked) {
    e.preventDefault();
    alert('请勾选必填选项');
    checkboxElement.scrollIntoView({ behavior: 'smooth' });
  }
});

关键说明： #

• 为什么用prop()而不是attr()？对于required这种布尔类型的属性，jQuery的prop()方法更合适，它直接操作DOM元素的属性值，而attr()是操作HTML属性，在处理布尔属性时容易出现不一致的情况。
• 如果页面中有多个符合id^="OrderLiveOrder_"的复选框，你可能需要更精准的选择器，比如加上[type="checkbox"]来限定：$('input[type="checkbox"][id^="OrderLiveOrder_"]')，避免选中其他类型的输入框。

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