Multiple jquery functions in one line on a html element

Question

I have a html element on which I should do multiple things on if condition. My present code:

<div>
  <label for="myInput">Add Number</label>
  <input id="myInput" type="number" required>
</div>

<script>
  if (someCondition) {
    $("#myInput").removeAttr("required");
    $("#myInput").prop("disabled", true);
    $("#myInput").val() = "";
  }
</script>

My question is, is it possible to condense the jquery code? If yes then how?

The term you're looking for is "chaining" or, specifically, [jquery chaining](https://stackoverflow.com/questions/7475336/how-does-jquery-chaining-work). Found a small note on it in learn.jquery.com: https://learn.jquery.com/using-jquery-core/working-with-selections/#chaining — freedomn-m, Mar 05 '21 at 08:08

score 3 · Answer 1 · edited Mar 05 '21 at 08:11

3

If you want to do it in a single line then you can do

$("#myInput").removeAttr("required").prop("disabled", true).val("");

Also $("#myInput").val() = ""; is not valid, it should be $("#myInput").val("");

Also as Roko pointed out it should be disabled and not diabled

Demo

if (true) {
  $("#myInput").removeAttr("required").prop("disabled", true).val("");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="myInput">Add Number</label>
  <input id="myInput" type="number" required value="2">
</div>

edited Mar 05 '21 at 08:11

freedomn-m

27,664
8
35
57

answered Mar 05 '21 at 07:57

Carsten Løvbo Andersen

26,637
10
47
77

1

@RokoC.Buljan good one didnt event noticed that one :) Thanks – Carsten Løvbo Andersen Mar 05 '21 at 07:58
Thanks for pointing the typo. I will rectify it. – user001 Mar 05 '21 at 08:02

Multiple jquery functions in one line on a html element

1 Answers1