选中指定单选按钮时设置文本框必填的jQuery代码失效排查

你的代码有3处错误，直接导致功能失效：

• 选择器匹配错误：HTML里单选按钮的name属性值是payment，但jQuery事件绑定写的是input[name='type']:radio，根本选不到你要监听的单选组，change事件完全没绑定成功。
• 属性操作写法错误：$('#cashtender').attr('required')是读取required属性值的写法，不是设置。而且对于required这类原生布尔属性，用attr()操作很容易出现HTML属性和DOM实际状态不同步的问题，jQuery官方推荐用prop()方法操作这类属性。
• 初始状态缺失：你的HTML里Cash选项默认是选中状态，但页面首次加载时没有给#cashtender加上required属性，初始状态下必填规则不生效。

SD和Budget的处理逻辑完全一致，可以合并分支减少冗余代码：

$(document).ready(function(){
    const $cashTenderInput = $('#cashtender');
    // 初始化页面时先同步默认选中项对应的必填状态
    const initSelected = $("input[name='payment']:radio:checked").val();
    $cashTenderInput.prop('required', initSelected === 'Cash');

    // 绑定单选切换事件，注意修正选择器的name值
    $("input[name='payment']:radio").on('change', function(){
        const currentVal = $(this).val();
        $cashTenderInput.prop('required', currentVal === 'Cash');
    });
});

补充说明 #

如果你坚持要用attr()/removeAttr()的写法，对应逻辑改成下面这样也能生效，但稳定性不如prop()：

// 选中Cash时
$cashTenderInput.attr('required', 'required');
// 选中其他选项时
$cashTenderInput.removeAttr('required');

注意：required是HTML布尔属性，只要标签上存在这个属性，不管值是什么，浏览器都会判定为必填，所以不要写attr('required', false)这类写法，会导致属性残留在标签上，必填规则无法取消。

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