Ваш пример кода очень сложен для работы. Я создал эту демонстрацию, чтобы показать вам основы того, как вы думаете go об этом. Обратите внимание, что для упрощения этой демонстрации я упростил ваш код и изменил как имена полей, так и имена классов. Если вы решите внедрить подобное решение, вам потребуется обновить код, чтобы соответственно использовать ваши собственные значения. (см. второй фрагмент.)
Решение:
- Используйте встроенную проверку браузера, добавив к полям атрибуты
required и pattern. Простой шаблон Rx = [0-9]{9} позаботится о вашем требовании проверки 9 целых чисел. Не забудьте повторно проверить серверную часть после отправки формы. - Используя JavaScript (/ jQuery), прослушайте изменения в поле SocialSecurity, а затем установите поле SSN * Атрибут 1017 * для
true или false до включает или отключает в зависимости от выбранного значения SocialSecurity. Если вы не хотите, чтобы отключенное поле SSN было видимым, вы можете JS скрыть его родительский контейнер. Обратите внимание, что, пока поле имеет свойство disabled, оно не будет проверяться или отправляться независимо от того, является ли оно видимым или нет.
Демо-версия Woking:
$(function() {
var $ssn = $(".SSN");
//add and enable and disable custom event:
$ssn.on("enable", function() {
$(this).show().find("input").attr("disabled", false);
}).on("disable", function() {
$(this).hide().find("input").attr("disabled", true);
})
//set initial state to disabled:
$ssn.trigger("disable");
//listen for changes and change the $ssn state accordingly
$("input[name='havessn']").on("change", function() {
var val = $(this).val();
if (val === 'nope') {
$(".SSN").trigger("disable");
} else {
$(".SSN").trigger("enable");
}
})
});
input:required:valid {
border: green solid 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="field SocialSecurity">
<span>Do you have a Social Security Number?</span>
<div>
<label><input type="radio" name="havessn" value="yup" required="required" />As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.</label><br />
<label><input type="radio" name="havessn" value="nope" required="required" />Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.</label>
</div>
<div class="field SSN">
<label>Social Security Number <input name="ssn" type="text" required="required" length="9" pattern="[0-9]{9}" title="Please provide a 9 digit SSN" />
</label>
</div>
<input type="submit" />
</form>
Демонстрация для вашего заданного c сценария использования с неповоротливыми громоздкими именами классов:
$(function() {
var $ssn = $(".SSN");
//add and enable and disable custom event:
$ssn.on("enable", function() {
$(this).show().find("input").attr("disabled", false);
}).on("disable", function() {
$(this).hide().find("input").attr("disabled", true);
})
//set initial state to disabled:
$ssn.trigger("disable");
//listen for changes and change the $ssn state accordingly
$("input[name='p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SocialSecurity$list']").on("change", function() {
var val = $(this).val();
if (val === "Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.") {
$(".SSN").trigger("disable");
} else {
$(".SSN").trigger("enable");
}
})
});
input:required:valid {
border: green solid 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field SocialSecurity">
<span id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_lb" class="EditingFormLabel">Do you have a Social Security Number?</span>
<div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_ncpsocialsecurity" class="EditingFormControlNestedControl editing-form-control-nested-control">
<span id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list" class="radio radio-list-vertical">
<input id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_0" type="radio" name="p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SocialSecurity$list" required="required" value="As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number." />
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_0">As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number.</label><br />
<input id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_1" type="radio" name="p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SocialSecurity$list" required="required" value="Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number." />
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SocialSecurity_list_1">Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number.</label>
</span>
</div></div>
<div class="field SSN">
<label id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_lb" class="EditingFormLabel" for="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_txtText">Social Security Number</label>
<div id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_ncpssn" class="EditingFormControlNestedControl editing-form-control-nested-control">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl00$On_lineForm$viewBiz$SSN$txtText" type="text" required="required" length="9" pattern="[0-9]{9}" title="Please provide a 9 digit SSN" id="p_lt_ctl03_pageplaceholder_p_lt_ctl00_On_lineForm_viewBiz_SSN_txtText" class="form-control" />
</div></div>