CODEWITHSUNDEEP
javascriptjqueryhtmlloopsinput
Muhammad Khazin
Muhammad Khazin

Reputation: 1

remove disabled attribute of input tag within loop using jquery

Im trying to remove the disabled attribute of the inputs one by one using loops and the id of the input as query selector but it is not working as intended. I managed to it without loops but then I have to write 3 different code for that. please help. Thanks. Edit: The keyup event will toggle the disabled attribute on the next input field. E.g if 1st input is not empty the disabled attribute at 2nd input field will be removed. And when 1st input is empty, the 2nd input will be disabled again. This goes for the 3rd and 4th input field. 

var inputs = $('input');
for (var i = 0; i < inputs.length; i++) {
 console.log('#'+inputs[i].id); //  print id1, id2, id3, id4
 console.log('#'+inputs[i+1].id); // print id2, id3, id4
 
   var x = '#'+inputs[i].id;
  var y = '#'+inputs[i+1].id;

$(x).keyup(function() {
    if ($(x).val() != '') {
      $(y).attr( "disabled", false );
    } else {
      $(y).attr("disabled", true);
    }
  })
  }
  
  // what I want my code to be like but in loops
  
  $("#id1").keyup(function() {
    if ($("#id1").val() != '') {
      $("#id2").attr( "disabled", false );
    } else {
      $("#id2").attr("disabled", true);
    }
  })

$("#id2").keyup(function() {
    if ($("#id2").val() != '') {
      $("#id3").attr( "disabled", false );
    } else {
      $("#id3").attr("disabled", true);
    }
  })

$("#id3").keyup(function() {
    if ($("#id3").val() != '') {
      $("#id4").attr( "disabled", false );
    } else {
      $("#id4").attr("disabled", true);
    }
  })
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="id1">
<input type="text" id="id2" disabled>
<input type="text" id="id3" disabled>
<input type="text" id="id4" disabled>

Upvotes: 0

Views: 1245

Answers (4)

antoni
antoni

Reputation: 5546

is this what you trying to perform?

$('input').keyup(function() {
  $(this).next('input').attr('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="id1">
<input type="text" id="id2" disabled>
<input type="text" id="id3" disabled>
<input type="text" id="id4" disabled>

If so you don't need a loop for that with jQuery.

Upvotes: 3

JO3-W3B-D3V
JO3-W3B-D3V

Reputation: 2134

I'm assuming this is what you're trying to achieve?

Edit

Unlike other solutions, this one will automatically toggle the disabled properties on all of the input fields, not just the one that's next inline to the one that has fired the keyup event. 

// Declare the inputs array.
let inputs = [];


// A function to check if an input field is empty or not. 
const isEmpty = el => el.value.replace(/\ /) === '';


// A function that iterates over the input array, disabling the relevant fields.
const toggleDisabled = () => {
  let disableRemainder = false;
  inputs.forEach((el, j) => {
    const next = inputs[j + 1] || {};
    if (!disableRemainder) disableRemainder = isEmpty(el);
    next.disabled = disableRemainder;
  });
};


// A function to hanlde the on key up event. 
const onKeyUpHandler = e => {
  const me = e.target;
  const index = me.id.replace(/\D/g, '');
  const value = me.value.replace(/\ /g, '');
  toggleDisabled();
};


// A function to initially add the event handler to the event on the 
// inputs. 
const dispatchEvents = () => inputs.forEach(el => el.onkeyup = onKeyUpHandler);


// Run the above code when the DOM is ready. 
$(document).ready(() => {
  inputs = document.querySelectorAll("input"); // Update the value. 
  dispatchEvents();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="id0">
<input type="text" id="id1" disabled>
<input type="text" id="id2" disabled>
<input type="text" id="id3" disabled>

Upvotes: 1

Md. Fazlur Rahman
Md. Fazlur Rahman

Reputation: 84

if id is unique then try this way.

if ($("#id3").val() != '') {
     $("#id3").prop('disabled', false);
    } else {     
    $("#id3").prop('disabled', true);
    }

I hope you will be helpful..

Upvotes: 0

mhombach
mhombach

Reputation: 196

You can't loop over an unknown number of IDs. If the IDs are not static and known by you, then give those elements an additional class like class="mySpecialItem". Then query for the class and not the ID so $(".mySpecialItem"). This will return an array (so a "list") which you can just loop through and do stuff for each entry :) Just for clarification: An id is used to uniquely select and distinct this one item only. If you want to have like a "group", then use class.

Upvotes: 0

Related Questions