如何基于动态生成的单选按钮禁用文件选择按钮

首先提个重要问题：你的HTML里所有文件上传按钮的ID都是Button_select_1，这违反了HTML的ID唯一性规范，容易引发各种兼容性问题。建议给这些按钮统一加个类名，比如file-upload-btn，同时把每个区域的文件按钮和单选按钮用一个容器（比如带form-section类的div）包裹起来，这样能精准对应每个区域的控件，避免互相干扰。

调整后的HTML示例 #

<!-- 第一个区域 -->
<div class="form-section">
    <input type="file" name="files" multiple="multiple" class="file-upload-btn" id="Button_select_1" />
    <div class="col-md-2 mt-15">
        <div class="custom-control custom-radio">
            <label>
                <input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
                <label>Yes</label>
            </label>
        </div>
    </div>
    <div class="col-md-2 mt-15">
        <div class="custom-control custom-radio">
            <label>
                <input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
                <label>No</label>
            </label>
        </div>
    </div>
    <div class="col-md-2 mt-15">
        <div class="custom-control custom-radio">
            <label>
                <input id="10_5" name="AnswerResponse" type="radio" value="2" />
                <label>N/A</label>
            </label>
        </div>
    </div>
</div>

<!-- 第二个区域 -->
<div class="form-section">
    <input type="file" name="files" multiple="multiple" class="file-upload-btn" id="Button_select_2" />
    <!-- 单选按钮结构和第一个区域一致 -->
</div>

JavaScript实现代码 #

这段代码会监听所有单选按钮的切换事件，自动控制对应区域的文件按钮禁用/启用：

// 给所有单选按钮绑定change事件
document.querySelectorAll('input[type="radio"][name="AnswerResponse"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // 找到当前单选按钮所在的区域容器
        const section = this.closest('.form-section');
        if (!section) return;
        
        // 定位到当前区域内的文件上传按钮
        const fileBtn = section.querySelector('.file-upload-btn');
        if (!fileBtn) return;
        
        // 根据选中的值设置禁用状态：选0或2时禁用，选1时启用
        fileBtn.disabled = (this.value === '0' || this.value === '2');
    });
});

// 页面加载完成后，初始化已选中单选按钮对应的文件按钮状态
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('input[type="radio"][name="AnswerResponse"]:checked').forEach(radio => {
        const section = radio.closest('.form-section');
        const fileBtn = section.querySelector('.file-upload-btn');
        if (fileBtn) {
            fileBtn.disabled = (radio.value === '0' || radio.value === '2');
        }
    });
});

无法修改HTML时的折中方案 #

如果因为特殊原因不能调整HTML结构，只能依赖DOM顺序来定位对应的文件按钮，代码如下：

// 绑定单选按钮事件
document.querySelectorAll('input[type="radio"][name="AnswerResponse"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // 向上遍历DOM，找到当前单选按钮所在区域的前一个文件按钮
        let currentElement = this;
        while (currentElement && currentElement.tagName !== 'INPUT') {
            currentElement = currentElement.parentElement;
            // 找到之前的兄弟元素里的文件按钮
            if (currentElement.previousElementSibling?.tagName === 'INPUT' && currentElement.previousElementSibling.type === 'file') {
                currentElement = currentElement.previousElementSibling;
                break;
            }
        }
        if (!currentElement) return;
        
        currentElement.disabled = (this.value === '0' || this.value === '2');
    });
});

// 初始化状态
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('input[type="radio"][name="AnswerResponse"]:checked').forEach(radio => {
        let currentElement = radio;
        while (currentElement && currentElement.tagName !== 'INPUT') {
            currentElement = currentElement.parentElement;
            if (currentElement.previousElementSibling?.tagName === 'INPUT' && currentElement.previousElementSibling.type === 'file') {
                currentElement = currentElement.previousElementSibling;
                break;
            }
        }
        if (currentElement) {
            currentElement.disabled = (radio.value === '0' || radio.value === '2');
        }
    });
});

注意事项 #

• 第一种方案（加容器和类）更稳定，也符合规范，优先推荐。
• 第二种方案依赖DOM结构的固定顺序，如果后续HTML结构调整，代码可能失效。

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