ASP.NET Core中如何通过下拉列表选项设置输入框必填

步骤1：调整HTML结构 #

给下拉框和输入框添加统一类名，同时给输入框加索引标识，确保循环中的每组控件能正确对应：

<select class="form-control answer-select" required name="[@i].Ansere" asp-for="@Model.ToList()[i].Ansere">
     <option value="" default="" selected="">انتخاب کنید</option>
     <option value="بله">بله</option>
     <option value="خیر">خیر</option>
     <option value="اقدام شد">اقدام شد</option>
     <option value="عدم نیاز">عدم نیاز</option>
     <option value="ابلاغ">ابلاغ</option>
</select>

<td colspan="3">
    <input class="form-control text-sm description-input" 
           placeholder="شرح مورد ارزیابی ..." 
           name="[@i].Discreption" 
           autocomplete="off"
           data-index="@i" />
</td>

步骤2：添加JavaScript逻辑 #

监听下拉框的change事件，根据选中值动态设置输入框的必填属性：

// 获取所有下拉选择框
const answerSelects = document.querySelectorAll('.answer-select');

answerSelects.forEach(select => {
    select.addEventListener('change', function() {
        // 从下拉框name属性中提取索引值
        const index = this.name.match(/\[@(\d+)\]/)[1];
        // 匹配对应索引的输入框
        const input = document.querySelector(`.description-input[data-index="${index}"]`);
        
        // 定义需要触发必填的选项值，可按需修改
        const requiredValues = ['بله', 'اقدام شد', 'ابلاغ'];
        
        if (requiredValues.includes(this.value)) {
            input.required = true;
            // 可选：添加样式提示用户这是必填项
            input.classList.add('is-required');
        } else {
            input.required = false;
            input.classList.remove('is-required');
        }
    });
});

// 页面加载时触发一次change事件，确保初始状态正确
document.addEventListener('DOMContentLoaded', function() {
    answerSelects.forEach(select => select.dispatchEvent(new Event('change')));
});

可选样式补充 #

如果需要给必填输入框添加视觉提示，可自定义CSS：

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

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