[英]jQuery - Add/Remove Required to an input
I try to add/remove the "required" element from inputs depending on the value of a select.我尝试根据 select 的值从输入中添加/删除“必需”元素。 Hiding/Showing works as a charm but nothing happen for the required element (both adding or removing).
隐藏/显示是一种魅力,但所需元素(添加或删除)没有任何反应。 Same issue with "prop" instead of "attr".
“prop”而不是“attr”的问题相同。
<div class="form-group">
<label class="control-label " for="id_Commission_Type">Commission Type</label>
<div class=" ">
<select name="Commission_Type" class=" form-control" required id="id_Commission_Type">
<option value="" selected>---------</option>
<option value="Percentage">Percentage</option>
<option value="Amount">Amount</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label " for="id_Commission_Percentage">Commission Percentage</label>
<div class=" ">
<input type="number" name="Commission_Percentage" step="any" class=" form-control" id="id_Commission_Percentage">
</div>
</div>
<div class="form-group">
<label class="control-label " for="id_Commission_Amount">Commission Amount</label>
<div class=" ">
<input type="number" name="Commission_Amount" step="any" class=" form-control" id="id_Commission_Amount">
</div>
</div>
<script>
$(function () {
$("#id_Commission_Percentage").prop("required", true);
$("#id_Commission_Type").change(function() {
var Commission_Type = $("#id_Commission_Type").val();
if (Commission_Type == "Percentage") {
$("#id_Commission_Amount").hide();
$("[for='id_Commission_Amount']").hide();
$("#id_Commission_Amount").removeAttr("required");
$("#id_Commission_Percentage").show();
$("[for='id_Commission_Percentage']").show();
$("#id_Commission_Percentage").prop("required", true);
}
else if (Commission_Type == "Amount") {
$("#id_Commission_Percentage").hide();
$("[for='id_Commission_Percentage']").hide();
$("#id_Commission_Percentage").removeAttr("required");
$("#id_Commission_Amount").show();
$("[for='id_Commission_Amount']").show();
$("#id_Commission_Amount").attr("required", true);
};
});
});
</script>
Try this:尝试这个:
$(document).ready(function() {
$("#id_Commission_Type").change(function() {
var Commission_Type = $("#id_Commission_Type").val();
if (Commission_Type == "Percentage") {
$("#id_Commission_Amount").hide();
$("[for='id_Commission_Amount']").hide();
$("#id_Commission_Amount").removeAttr("required");
$("#id_Commission_Percentage").show();
$("[for='id_Commission_Percentage']").show();
$("#id_Commission_Percentage").attr("required", true);
}
else if (Commission_Type == "Amount") {
$("#id_Commission_Percentage").hide();
$("[for='id_Commission_Percentage']").hide();
$("#id_Commission_Percentage").removeAttr("required");
$("#id_Commission_Amount").show();
$("[for='id_Commission_Amount']").show();
$("#id_Commission_Amount").attr("required", true);
};
});
});
In other words: try $(document).ready(function() {...})
instead of $(function() {...}
.换句话说:尝试
$(document).ready(function() {...})
而不是$(function() {...}
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.