jQuery removeAttr，prop，attr不适用于必需＆＃x27;财产

Question

美好的一天，我正在与遇到困难和解决与HTML形式组件的“必需”属性有关的所有问题的每个人接触。就我而言，每当我尝试使用removeAttr，attr或prop方法修改或设置它时，“必需”属性似乎不会更新。

注意：“占位持有人”属性的拆卸tr起作用，但是对于“必需”而言，它却没有。

$(document).ready(function() {
  $("select#decision").on('change', function() {
    var decValue = $("select#decision").val();

    if (decValue == 'For STR') {
      $("textarea#addtl_reason").prop('required', true);
      $("textarea#add_notes").removeAttr('placeholder');
      $("#sos").slideDown();
      $("#reason").slideDown();
      $("#narrative").slideDown();
    } 
    else {
      $("textarea#addtl_reason").removeAttr('required');
      $("#sos").slideUp();
      $("#reason").slideUp();
      $("#narrative").slideUp();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "narrative" class="form-group col-md-6">
  <label class="control-label col-md-5" for="addtl_reason">STR Narrative</label>
  
  <div class="col-md-7">
    <textarea cam-variable-name="addtl_reason"
              cam-variable-type="String"
              id="addtl_reason"
              maxlength="4000"
              class="form-control glow"
              rows="5"
              aria-describedby="notesHelpBlock"
              placeholder="Write your case narrative here..."
              onkeyup="cnt_reason_character()"
              autofocus></textarea>

    <small id="notesHelpBlock" class="form-text pull-right text-muted"> <span id="words_count" class="d-none form-text text-muted"> <span id="reason_textcount">0</span> / 4000</span></small>
    <small id="notesHelpBlock" class="form-text text-muted">Provide your case narrative here.</small>
  </div>
</div>

Answer 1

尝试Vanilla JavaScript：

.setAttribute('required', true/false);
.removeAttribute('required');
.toggleAttribute('required');

如果您在jQuery对象上使用Vanilla JavaScript方法，它将无法识别它。因此，您要么使用JavaScript方法引用元素（推荐）或退参考jQuery对象：

// Two ways to de-referencing a jQuery object
$('input')[0]
//OR
$('input').get(0)

零表示您仅针对第一个目标，因此，如果您已经知道这是第二个输入使用索引1。

// Using no ids, classes, or tagnames just indexes
document.forms[0].elements[1].onclick = e => 
  e.target.previousElementSibling.toggleAttribute('required');
  
// De-referencing the second .data 
$('.data')[1].setAttribute('required', true);

[required] {
  outline: 3px dashed red
}

<form>
  <input name='data' class='data'><input type='button' value='Toggle'><br>
  <input name='data' class='data'><br>
  <button>Submit</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

只是一些建议，您要删除的属性通常不会因为其性质而被删除。 占位符永远不需要删除，因为当用户专注于表单控件时，它会消失。 必需的不应删除，因为它有助于验证。您为什么需要删除它们？