jQuery - 添加/删除所需的输入

Question

我尝试根据选择的值从输入中添加/删除“必需”元素。隐藏/显示是一种魅力，但所需元素（添加或删除）没有任何反应。 “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>

Answer 1

试试这个：

$(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);

            };
        });

    });

换句话说：尝试$(document).ready(function() {...}) 而不是$(function() {...}。