我有一个web表单，它显示/隐藏基于各种单选按钮和复选框的辅助输入字段。这个显示/隐藏是用一个$(".id").on('change', function(){触发的JQuery完成的，它们隐藏所有可选字段并显示特定的字段:
$(".optionalInfo").hide();
$('#releaseRelated').prop('checked', false); // Uncheck the 'Is this Release Related' box.
$('input[name="repIdAvail"]').prop('checked', false); //Uncheck all the 'Is the Report ID available' boxes.
$('.newRepData').show(); // show the new report DIV
等。
我可以为每个字段添加$(".newReportInput").prop('required',true);，但想知道我是否可以在函数末尾添加单行，使所有字段具有#optionalInfo类和'show'属性为'required'?
我发现这个JQuery改变匹配2个属性的所有字段:input[id][name$='man']" ).val( "only this one" );除了我想让所有输入字段都是必需的，如果它们是在一个带有。optionalinfo类的dvi和div具有'Show'属性'
JQuery的新手，所以这可能是一个不好的事情。
编辑:
显示我想要做的小网页:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Request</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form target="_blank">
<!-- Radio buttons for request type. Subsequent input fields will appear depending upon the request type -->
<input type="radio" required name="type" id="ADD" class="reqType">
<label class="form-check-label" for="ADD">Add new report</label>
<input type="radio" name="type" id="DELETE" class="reqType">
<label class="form-check-label" for="DELETE">Delete report</label>
<!-- 'Add report' fields -->
<div class="optionalInfo newRepData">
<label for="reportId">New Report ID :</label>
<input type="text" name="reportId" id="reportId">
<label for="reportName">New Report Name :</label>
<input type="text" name="reportName" id="reportName">
</div>
<br><br><input type="submit" value="Submit Request">
</form>
<script>
// Hide all optional fields when the page is loaded
$(document).ready(function() {
$(".optionalInfo").hide();
});
// Hide all optional fields when a request type is chosen and then reveal the relevant fields
$(".reqType").on('change', function(){
// hide all of the optional inputs
$(".optionalInfo").hide();
// Show/hide optional fields depending upon the request chosen
switch ($(this).attr('id')) {
case "ADD":
$('.newRepData').show();
break;
case "DELETE":
break;
}
});
</script>
</body>
</html>
当选择"添加"选项时，我希望从"隐藏"切换到"显示"以获得"所需"标签的2个字段。
注意-这只是一个简单的例子，因为我的表单更长。我必须回滚添加了可执行代码片段的编辑，因为这些编辑改变了问题的性质。
潜在的问题是:如何使所有可见的输入字段在一些JS代码隐藏/显示各种输入字段后的形式'required'。
你可以这样做:单击添加显示newrepdata并向输入中添加所需属性，单击删除隐藏newrepdata并从输入中删除所需属性:
// Hide all optional fields when the page is loaded
$(document).ready(function() {
$(".optionalInfo").hide();
});
// Hide all optional fields when a request type is chosen and then reveal the relevant fields
$(".reqType").on('change', function() {
// hide all of the optional inputs
$(".optionalInfo").hide().children("input").removeAttr("required");
// Show/hide optional fields depending upon the request chosen
switch ($(this).attr('id')) {
case "ADD":
$('.newRepData').show().children("input").attr("required","");
break;
case "DELETE":
break;
}
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Request</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form target="_blank">
<!-- Radio buttons for request type. Subsequent input fields will appear depending upon the request type -->
<input type="radio" required name="type" id="ADD" class="reqType">
<label class="form-check-label" for="ADD">Add new report</label>
<input type="radio" name="type" id="DELETE" class="reqType">
<label class="form-check-label" for="DELETE">Delete report</label>
<!-- 'Add report' fields -->
<div class="optionalInfo newRepData">
<label for="reportId">New Report ID :</label>
<input type="text" name="reportId" id="reportId">
<label for="reportName">New Report Name :</label>
<input type="text" name="reportName" id="reportName">
</div>
<br><br><input type="submit" value="Submit Request">
</form>
</body>
</html>如果我没有理解，我设置了输入部分的要求:
to alldiv hidden I put off required
$('div.optionalInfo:hidden').find('input').prop("required", false");
$('div.optionalInfo:visible').find('input').prop("required", true");
您可以调整语法，例如选择器输入:
$('div.optionalInfo input:visible').prop("required", true");