Jquery show/hide element based on multiple conditions-CodePudding

I am trying to disable button element based on selection value from a dropdown and when textarea is not empty. So when user select Reject from dropdown list, they have to also fill the textarea input, otherwise they cannot update (the button is disable not hide).

However I am unable to achieve it completely, I've only success for dropdown condition only (also in hide state, not disable). This is what I've got:

(Also it could be nice if someone can code this with pure javascript, not jquery, thank you)

$(document).ready(function(){
  $(".input-wrap > select").on("change", function() {
    if ( this.value == "Reject")
    {
      $("button").hide();
    }
    else
    {
      $("button").show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-wrap">
  <select class="select-class" id="selectId">
    <option value="Reject">Reject</option>
    <option value="Earn">Earn</option>
   </select>
</div>
<div class="input-wrap">
  <textarea class="textarea-class"></textarea>
</div>
<button type="button" class="button-class">Update</button>

CodePudding user response：

you can disable the button using

$("button").prop('disabled', true);

and also check text field empty or not using

if($("#textid").val().trim()!="")

 <!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $(".input-wrap > select").on("change", function () {
                    if (this.value == "Reject") {
                        $("button").prop('disabled', true);
                    }
                    else {
                        $("button").show();
                        $("button").prop('disabled', false);
                    }
                });
                $("#textid").on('keyup', function () {
                    if ($("#textid").val().trim() != "") {
                        $("button").prop('disabled', false);
                    } else {
                        $("button").prop('disabled', true);
                    }
                });
            });
        </script>
    </head>
    <body>

        <div class="input-wrap">
            <select class="select-class" id="selectId">
                <option value="Reject">Reject</option>
                <option value="Earn">Earn</option>
            </select>
        </div>
        <div class="input-wrap">
            <textarea class="textarea-class" id="textid"></textarea>
        </div>
        <button type="button" class="button-class">Update</button>
    </body>
    </html>

CodePudding user response：

You can use the and operator (&&)

if(this.value == "reject" && ... your other condition) {
  // both conditions are met
}else {
  // one or more condition is not met
}