jQuery调用removeAttr/prop/attr设置required属性不生效问题

required属于表单元素的布尔型属性，和placeholder这类普通字符串属性的操作逻辑存在本质区别，你代码中混用prop()和removeAttr()操作该属性，是导致状态更新不生效的核心原因。

• 布尔型表单属性（含required/disabled/checked/selected等）的校验逻辑读取的是DOM节点的property值，而非HTML标签上的attribute标记，混用不同维度的操作方法会造成状态不同步，表单无法识别最新的属性状态。
• 你当前的逻辑中，设置必填时用.prop('required', true)操作property，取消必填时却用.removeAttr('required')操作attribute，两个方法操作的状态层不统一，自然会出现属性更新不生效的问题。
• removeAttr操作placeholder能正常生效，是因为placeholder是普通字符串类型的attribute，没有独立的property状态，直接修改HTML标签上的属性即可触发视图更新，和required的底层逻辑完全不同。

全程使用prop()方法操作required这类布尔属性，保证设置和取消的操作维度统一，修正后的JS代码如下：

$(document).ready(function() {
  $("select#decision").on('change', function() {
    // 直接用当前事件对象取值，避免重复查询DOM
    var decValue = $(this).val();

    if (decValue == 'For STR') {
      $("textarea#addtl_reason").prop('required', true);
      $("textarea#add_notes").removeAttr('placeholder');
      $("#sos").slideDown();
      $("#reason").slideDown();
      $("#narrative").slideDown();
    } 
    else {
      // 取消必填同样用prop设置为false，不要使用removeAttr
      $("textarea#addtl_reason").prop('required', false);
      // 可选：清除元素上残留的校验提示状态
      $("textarea#addtl_reason").get(0).setCustomValidity('');
      $("#sos").slideUp();
      $("#reason").slideUp();
      $("#narrative").slideUp();
    }
  });
});

如果坚持要用attribute方法操作required，必须保证设置和取消逻辑统一：设置时用.attr('required', 'required')，取消时用.removeAttr('required')，但这种方式不推荐，jQuery官方明确要求布尔型属性优先使用prop()操作，兼容性和状态一致性更有保障。

内容的提问来源于stack exchange，提问作者Edgar Paolo Capulong