jQuery

Question

我尝试根据 select 的值 add/remove 来自输入的 "required" 元素。 Hiding/Showing 很有魅力，但所需元素（添加或删除）没有任何反应。 "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() {...}。

jQuery - Add/Remove 需要输入

jQuery - Add/Remove Required to an input

input

required