set attr of inputs on this row
I have a table with 3 rows
<table id="table1">
<tr>
<td><input type="text" disabled="disabled" value="200"/></td>
<td><input type="text" disabled="disabled" value="300"/></td>
<td><input type="checkbox"/></td>
<tr>
<tr>
<td><input type开发者_如何学JAVA="text" disabled="disabled" value="400"/></td>
<td><input type="text" disabled="disabled" value="600"/></td>
<td><input type="checkbox"/></td>
<tr>
</table>
Jquery when someone clicks the checkbox i would like to change the attr of the 2 inputs on that row and make them editable but if someone clicks the checkbox on another row the previously enabled input must be disabled and the new one enabled
This is what i thought but it doesnt work
$("#table1 :checkbox").click(function(){
$(this).parent(":input[type='text']").attr('disabled',false);
});
parent(":input[type='text']")
says "give me the parent node if it is an input element with the type text
. This obviously isn't what you want! You need to use find
:
$("#table1 :checkbox").click(function(){
$(this)
.closest('tr') // find the parent row
.find(":input[type='text']") // find text elements in that row
.attr('disabled',false) // enable them
.end() // go back to the row
.siblings() // get its siblings
.find(":input[type='text']") // find text elements in those rows
.attr('disabled',true); // disable them
});
You can watch watch for changes to all of your checkboxes, which will fire on both selections and deselections. If selected we can set the disabled
attribute to an empty string in order to "enable", and if deselected to "disabled" in order to re-disable the inputs:
$('#table1 :checkbox').change(function() {
$(this).closest('tr').find('input[type="text"]').attr('disabled',
this.checked ? '' : 'disabled'
);
});
DEMO: http://jsfiddle.net/marcuswhybrow/8WtvK/
$('#table1 input:checkbox').click(function() {
var row = $(this).closest('tr');
row.find('input:text').attr('disabled', false);
row.siblings().find('input:text').attr('disabled', true);
});
Live demo: http://jsfiddle.net/buAmd/
I used radio boxes in the demo since both boxes cannot be checked at the same time.
精彩评论