单选按钮勾选时设置字段为必填项的实现求助

看起来你已经有了不错的开头，我来帮你把这段代码补全并优化一下，确保逻辑更健壮：

完整代码示例 #

// 监听整个单选按钮组的变化事件，不管点击哪个选项都会触发
$("input[name='availability_to_work']").on('change', function() {
    // 判断目标单选按钮是否被选中
    const isTargetChecked = $("#availability_to_work-1").is(":checked");
    // 定位目标日期字段（补全了你没写完的类选择器，若实际类名不同替换即可）
    const targetField = $("#availability_date_to_work, .wpjb-element-input-text.wpjb-element-name-availability_date_to_work");
    
    // 给目标字段设置/移除必填属性
    targetField.prop('required', isTargetChecked);
    
    // 可选：如果需要同步控制字段显示隐藏，可添加这行
    // targetField.toggle(isTargetChecked);
});

// 页面加载时初始化一次，避免刷新后状态不一致
$(document).ready(function() {
    $("input[name='availability_to_work']").trigger('change');
});

关键优化点说明 #

• 统一事件监听：直接监听整个单选按钮组的change事件，不用单独绑定某个按钮，用户切换任意选项时逻辑都会触发，避免遗漏场景。
• 完善选择器：补全了你未写完的类选择器，同时保留id选择器作为备选，确保能精准定位到目标字段，适配不同DOM结构情况。
• 初始化状态：页面加载时主动触发一次change事件，这样如果页面刷新时单选按钮默认是选中状态，目标字段的必填属性也能同步生效，不会出现状态错位。
• 代码可读性：用变量简化重复的DOM操作和判断逻辑，后续维护起来更方便。

额外实用提示 #

如果需要给必填字段添加视觉提示（比如高亮边框），可以在设置required的同时同步切换CSS类：

targetField.prop('required', isTargetChecked).toggleClass('wpjb-required-field', isTargetChecked);

然后在你的CSS里定义这个类的样式就行，比如：

.wpjb-required-field {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

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