Reputation: 310
Completely new to JQuery so read some of the documentation here:
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.
Upvotes: 0
Views: 84
Reputation: 63587
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>
Upvotes: 0
Reputation: 1142
$(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');
});
Upvotes: 0
Reputation: 132
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);
});
});
Upvotes: 0
Reputation: 68443
Multiple issues, updated fiddle
if
instead of while
index
and using x
which would have become max
by the time click
is executed.)
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
instead of template literals.Upvotes: 1
Reputation: 807
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');
})
}
};
Upvotes: 0
Reputation: 478
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');
})
}
});
Upvotes: 0