jQuery - Add/Remove Required to an input

Question

I try to add/remove the "required" element from inputs depending on the value of a 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".

<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

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() {...}.