选中指定下拉选项时启用expdate日期输入框并设为必填的实现方法

实现方案 #

你只需要在现有的下拉框change事件逻辑里，同步控制expdate字段的required属性即可，同时顺便修正你原有代码里的一处参数不匹配的问题：

• 当下拉选中目标值时，expdate 不禁用，同时设置required为true
• 选中其他值时，expdate 禁用，同时移除required属性避免表单提交时校验不触发

修改后的完整JS代码如下：

<script type="text/javascript">
    function $enableRequiredTextField($field) {
        $field.val("");
        $field.prop({"readonly": false,"tabIndex":0});
        $field.removeAttr('style');
    }

    // 修正了原函数参数名和内部使用变量不一致的问题
    function $disableRequiredTextField($field) {
        $field.val("N/A");
        $field.prop({"readonly": true,"tabIndex":-1});
        $field.css({"background-color": "#DDDDDD"});
        $field.removeClass("alertborder");
    }

    $('#authorize').change(function() {
        const isLimited = $('option:selected', this).val() == 'Limited authorization for the following time period or visit date(s) listed below';
        $('#expdate').prop({
            'disabled': !isLimited,
            'required': isLimited // 新增此行控制必填属性
        });
        // 如果你需要复用之前写的两个字段状态处理函数，可以替换上面的prop设置逻辑为下方代码
        // if(isLimited) {
        //     $enableRequiredTextField($('#expdate'));
        // } else {
        //     $disableRequiredTextField($('#expdate'));
        // }
    }).change();
</script>

如果你的表单框架本身会识别required属性做提交校验，上述修改完成后即可直接生效。如果提交时没有触发必填校验，你可以额外在表单提交事件中加判断：如果expdate未禁用且值为空，就阻止提交并提示用户填写即可。

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