javascript - Jquery prop required 错误

Question

我这里有一个问题。

Prop 功能: 所以我在将两个选项设置为必需时遇到问题。一种有效，一种无效。 .prop('required',true); 适用于 #additional_here_about_other_field。这将该字段设置为必填字段。但同样的 .prop('required',true); 不适用于 #additional_who_is_your_orthodontist_field。我希望这个字段也是必填字段，但它不起作用。

jQuery(document).ready(function () {
	
	if(jQuery("#additional_here_about_other_field").length > 0){
		jQuery("#additional_here_about_other_field").hide();
		jQuery("#additional_how_did_u_hear_about_harp").change(function(){
			if(jQuery(this).val() == 'Other (please specify)'){ jQuery("#additional_here_about_other_field").show().prop('required',true); }
			else { jQuery("#additional_here_about_other_field").hide(); }
		});
	}
	if(jQuery("#additional_who_is_your_orthodontist_field").length > 0){
		jQuery("#additional_who_is_your_orthodontist_field").hide();
		jQuery("#additional_how_did_u_hear_about_harp").change(function(){
			if(jQuery(this).val() == 'Orthodontist Referral'){ jQuery("#additional_who_is_your_orthodontist_field").show().prop('required',true); }
			else { jQuery("#additional_who_is_your_orthodontist_field").hide(); }
		});
	}
});

HTML snippet

<select name="additional_how_did_u_hear_about_harp" id="additional_how_did_u_hear_about_harp" class="select " data-allow_clear="true" data-placeholder="How Did You Hear About The Harp?" >
	<option value=""  selected='selected'></option>
	<option value="Patient" >Patient</option>
	<option value="Orthodontist Referral" >Orthodontist Referral</option>
	<option value="Trade Show" >Trade Show</option>
	<option value="Mailer" >Mailer</option>
	<option value="Other (please specify)" >Other (please specify)</option>
</select>

<div class="clear"></div>
<p>		
	<input type="text" class="input-text " name="additional_here_about_other_field" id="additional_here_about_other_field" placeholder="Other (please specify)"   value=""  />
</p>
<div class="clear"></div>
<p>		
	<input type="text" class="input-text " name="additional_who_is_your_orthodontist" id="additional_who_is_your_orthodontist" placeholder="Who is your orthodontist?"   value=""  />
</p>
<div class="clear"></div>

Answer 1

1. 您的输入字段additional_who_is_your_orthodontist中有拼写错误，但您查询了所述additional_who_is_your_orthodontist_field

$(document).ready(function() {

  if ($("#additional_here_about_other_field").length > 0) {
    $("#additional_here_about_other_field").hide();
    $("#additional_how_did_u_hear_about_harp").change(function() {
      if ($(this).val() == 'Other (please specify)') {
        $("#additional_here_about_other_field").show().prop('required', true);
      } else {
        $("#additional_here_about_other_field").hide();
      }
    });
  };
  if ($("#additional_who_is_your_orthodontist").length > 0) {
    $("#additional_who_is_your_orthodontist").hide();
    $("#additional_how_did_u_hear_about_harp").change(function() {
      if ($(this).val() == 'Orthodontist Referral') {
       $("#additional_who_is_your_orthodontist").show().attr('required', true);
      } else {
        $("#additional_who_is_your_orthodontist").hide();
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="additional_how_did_u_hear_about_harp" id="additional_how_did_u_hear_about_harp" class="select " data-allow_clear="true" data-placeholder="How Did You Hear About The Harp?">
	<option value=""  selected='selected'></option>
	<option value="Patient" >Patient</option>
	<option value="Orthodontist Referral" >Orthodontist Referral</option>
	<option value="Trade Show" >Trade Show</option>
	<option value="Mailer" >Mailer</option>
	<option value="Other (please specify)" >Other (please specify)</option>
</select>

<div class="clear"></div>
<p>
  <input type="text" class="input-text" name="additional_here_about_other_field" id="additional_here_about_other_field" placeholder="Other (please specify)" value="" />
</p>
<div class="clear"></div>
<p>
  <input type="text" class="input-text" name="additional_who_is_your_orthodontist" id="additional_who_is_your_orthodontist" placeholder="Who is your orthodontist?" value="" />
</p>
<div class="clear"></div>