如何根据jquery/ajax在其他输入字段中选择的值在输入时激活所需的值

Question

我有一个带有两个单选按钮的窗体，如果我选择"是"；，通常会出现具有2对单选按钮的DIV，如果在第一对中选择"是"，则我需要在2对新的单选按钮中设置required("类型"one_answers"要做什么"(。如果"；移动数字"；在"；要做什么"；无线电对，第二个DIV出现，其中有一个输入字段，用户应该告诉移动哪个数字。。则该字段需要设置CCD_ 2。。我如何动态地做到这一点？

仅供参考，我使用Parsley JS Validator来验证字段。

下面是一段极简主义的代码：

function CompanyMobileFunction() {
var x = document.getElementById("CompanyMobile");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

function CompanyMobileMoveFunction() {
var x = document.getElementById("MobileMove");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

function CompanyMobileFunctionClose() {
var x = document.getElementById("CompanyMobile");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}

function CompanyMobileMoveFunctionClose() {
var x = document.getElementById("MobileMove");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}

<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
<td>
<label class="container">Yes
<input type="radio" id="CompanyMobileYES" name="CompanyMobile" onclick="CompanyMobileFunction()" value="yes">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">No
<input type="radio" id="CompanyMobileNO" name="CompanyMobile" onclick="CompanyMobileFunctionClose()" value="yes">
<span class="radio"></span>
</label>                          
</td>
</tr>
</table>              

<div id="CompanyMobile" style="display: none;">

<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Type (required) :</b></td>
<td>
<label class="container">iPhone
<input type="radio" id="iPhone" name="MobileOS" value="iPhone">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Android
<input type="radio" id="Android" name="MobileOS" value="Android">
<span class="radio"></span>
</label>                          
</td>
</tr>
<tr>
<td style="width: 250px;"><b>What to do? (required) :</b></td>
<td>
<label class="container">New Number
<input type="radio" id="CompanyMobileMoveNew" name="CompanyMobileMove" onclick="CompanyMobileMoveFunctionClose()" value="newnumber">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Move Number
<input type="radio" id="CompanyMobileMoveMove" name="CompanyMobileMove" onclick="CompanyMobileMoveFunction()" value="movenumber">
<span class="radio"></span>
</label>                          
</td>
</tr>
</table>   

<div id="MobileMove" style="display: none;">
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Number to move (required) :</b></td>
<td align="left">

<input class="form-control" style="width: 130px;" type="number" id="mobiletomove" name="mobiletomove" minlength="11111111" maxlength="99999999">

</td>
</tr>
</table>
</div>

Answer 1

您可以使用jQuery、classes和prop()来执行此操作。确保删除required道具，即使输入是隐藏的。

function toggleRequired(){

var isYesChecked = $('#CompanyMobileYES').is(':checked');     
var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');  

$('[name="MobileOS"]').prop('required', isYesChecked);
$('[name="CompanyMobileMove"').prop('required', isYesChecked);     

$('#mobiletomove').prop('required', isMoveChecked); 
}

function toggleHidden(){

var isYesChecked = $('#CompanyMobileYES').is(':checked');     
var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');  

$('#CompanyMobile').toggleClass('hidden', !isYesChecked);    
$('#MobileMove').toggleClass('hidden', !isYesChecked || !isMoveChecked ); 
}


$('[name="CompanyMobile"]').on('change',function () {
toggleRequired();
toggleHidden();
} );
$('[name="CompanyMobileMove"]').on('change',function () {
toggleRequired();
toggleHidden();
} );

.hidden {
display: none;
}
input:required::after {
content: '***';
margin: 15px;
}
input:required {
border: 1px solid red;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
<td>
<label class="container">Yes
<input id="CompanyMobileYES" name="CompanyMobile" type="radio" value="yes">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">No
<input id="CompanyMobileNO" name="CompanyMobile" type="radio" value="no">
<span class="radio"></span>
</label>
</td>
</tr>
</table>

<div class="hidden" id="CompanyMobile">

<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Type (required) :</b></td>
<td>
<label class="container">iPhone
<input id="iPhone" name="MobileOS" type="radio" value="iPhone">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Android
<input id="Android" name="MobileOS" type="radio" value="Android">
<span class="radio"></span>
</label>
</td>
</tr>
<tr>
<td style="width: 250px;"><b>What to do? (required) :</b></td>
<td>
<label class="container">New Number
<input id="CompanyMobileMoveNew" name="CompanyMobileMove" type="radio" value="newnumber">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Move Number
<input id="CompanyMobileMoveMove" name="CompanyMobileMove" type="radio" value="movenumber">
<span class="radio"></span>
</label>
</td>
</tr>
</table>
</div>
<div class="hidden" id="MobileMove">
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Number to move (required) :</b></td>
<td align="left">
<input class="form-control" id="mobiletomove" maxlength="99999999" minlength="11111111" name="mobiletomove" style="width: 130px;" type="number">
</td>
</tr>
</table>
</div>