JQuery Loop Through Variables to change element

Question

Completely new to JQuery so read some of the documentation here:

https://api.jquery.com/click/

I am trying to change an input from disabled to enabled on user click. I used this code which works fine:

$('#edit1').click(function(){
        $('#doc1').removeAttr('disabled');
});

I then wanted to loop through it for every value of edit1 and doc1 i.e. edit2 and doc2...etc.

I have tried this:

$(document).ready(function () {
        var max = 6;
        var i = 0;
        var x = 0

        if (x < max) {
            i++
            x++;

            $('#edit${i}').click(function () {
                $('#doc${x}').removeAttr('disabled');
            })
        }
    };

And can be seen here:

http://jsfiddle.net/Rockhopper92/9oapaf1k/

Now this does somehow "look" wrong to me but can't put my finger on it. I have a feeling it's to do with where I'm opening and closing my brackets or some really fundamental error like the opening line '$(document).ready(function()'

This is my first attempt at JQuery so any general pointers would be a massive help to me.

Answer 1

What you might find easier is to use classes instead of ids. Attach an edit class to each div then target those with the jQuery selector. That way you won't have to use a loop.

You target the class with $('.edit'), and then in the callback you target the input within the current selector context (this). You can then switch off the disable property.

(In the HTML I've replaced the value with a placeholder instead.)

$(document).ready(function() {
  $('.edit').on('click', function() {
    $('input', this).prop('disabled', false);
  });
});

.row {
  width: 100%;
}

.content {
  width: 90%;
  text-align: center;
}

input[type=text] {
  padding: 6px 10px;
  margin: 8px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
    <div class="edit">
      <input type="text" id="doc1" placeholder="Document 1" disabled><i class="far fa-edit"></i>
    </div>
    <div class="edit">
      <input type="text" id="doc2" placeholder="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>
    <div class="edit">
      <input type="text" id="doc3" placeholder="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

Answer 2

$(document).ready(function() {
	// Find all divs with id which starts with edit and listen for a click event
   $('[id^="edit"]').click(function() {
     // find the input for the clicked div
     var doc = $(this).find($('input'));
     // remove the attribute
     doc.removeAttr('disabled');
  });
});

.row {
  width: 100%;
}

.content {
  width: 90%;
  text-align: center;
}

input[type=text] {
  padding: 6px 10px;
  margin: 8px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">


</script>

<div class="row">
  <div class="content">
    <div id="edit1">
      <input type="text" id="doc1" value="Document 1" disabled><i class="far fa-edit"></i>
    </div>

    <div id="edit2">
      <input type="text" id="doc2" value="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit3">
      <input type="text" id="doc3" value="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit4">
      <input type="text" id="doc4" value="Document 4" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit5">
      <input type="text" id="doc5" value="Document 5" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit6">
      <input type="text" id="doc6" value="Document 6" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

There are several way to do this without the use of a loop.

You can add a class to your element and listen for a click event.

$('.yourClass').click(function(){
 $(this).removeAttr('disabled');
});

You can also listen to every click on an element with id starting with something.

If you know the element type then: (eg: replace 'element' with 'div')

$("element[id^="edit"]").click(function(){
 $(this).removeAttr('disabled');
});

If you don't know the element type:

$("[id^="edit"]").click(function(){
 $(this).removeAttr('disabled');
});

Answer 3

Try this solution :

This will enable/disable respective input when you click edit icon.

$(document).ready(function()
{
     $(document).on("click", ".fa-edit" , function(e)
   {
      var element = $(this);
      if(element.parent().children('input').attr('disabled') == 'disabled')
      element.parent().children('input').attr('disabled' , false);
      else
      element.parent().children('input').attr('disabled' , true);


   });

});

Answer 4

Multiple issues, updated fiddle

• Using if instead of while
• Not taking correct index and using x which would have become max by the time click is executed.
• Not using the closing brace ) for document.ready.

Demo

$(document).ready(function() {
  var max = 6;
  var i = 0;

  while (i < max) {
    i++;

    $('#edit' + i).click(function() {
      var index = this.id.substring( 4 );
      $('#doc' + index).removeAttr('disabled');
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">


</script>

<div class="row">
  <div class="content">
    <div id="edit1">
      <input type="text" id="doc1" value="Document 1" disabled><i class="far fa-edit"></i>
    </div>

    <div id="edit2">
      <input type="text" id="doc2" value="Document 2" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit3">
      <input type="text" id="doc3" value="Document 3" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit4">
      <input type="text" id="doc4" value="Document 4" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit5">
      <input type="text" id="doc5" value="Document 5" disabled><i class="far fa-edit"></i>
      <br>
    </div>

    <div id="edit6">
      <input type="text" id="doc6" value="Document 6" disabled><i class="far fa-edit"></i>
      <br>
    </div>
  </div>
</div>

Note

• I am using simple concatenation of i instead of template literals.

Answer 5

Try this one:

$(document).ready(function () {
    var max = 6;
    var i = 0;
    var x = 0; //no need

    for (i=0;i<=max;i++) {    

        $('#edit'+i).click(function () {
            $('#doc'+i).removeAttr('disabled');
        })
    }
};

Answer 6

if you want to use template literals use backticks `` isntead of '', if not you can use plain javascript :

$('#edit'+ i).click(function(){
        $('#doc'+x).removeAttr('disabled');
  })

Something like:

$(document).ready(function() {
var max = 6;
var i = 0;
var x = 0

if(x < max){
i++
x++;

$('#edit'+ i).click(function(){
        $('#doc'+x).removeAttr('disabled');
  })
}
});