Is there a pre made function in jQuery wherein when you click a button it will enable a row. Then if you click it again, it will disable the row. I found about toggle() and toggleClass(). But it does work when it calls a function. The thought is somewhat like this but I know the syntax is wrong.
jQuery
function disableRows(){
$("#test1table tbody tr").each(function() {
$(this).find('input:text').prop('disabled', true);
});
function enableRows(){
$("#test1table tbody tr").each(function() {
$(this).find('input:text').prop('disabled', false);
});
$(document).ready(function() {
$('.yearButt').click(function(){
$(this).toggleClass(enableRows(), disableRows());
});
});
I think below code help you to understand the requirements:
Ref: Enable Disable Controls in a table row
$(document).on('change', '.chkView', function() {
$(this).closest('tr').find('.chkEdit, .chkDelete').prop('disabled', !this.checked);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_forms">
<tr>
<td><input type="checkbox" class="chkView"/>View</td>
<td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
<td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
</tr>
<tr>
<td><input type="checkbox" class="chkView"/>View</td>
<td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
<td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
</tr>
</table>You can simplify your code:
$(document).ready(function() {
$('.yearButt').click(function(){
var enabled = parseInt($(this).data('enabled'));
$("#test1table tbody tr input:text").prop('disabled', enabled );
$(this).data('enabled', !enabled)
});
});
Use toggle not toggleClass, toggle will call functions alternatively on each click event
$(document).ready(function() {
$('.yearButt').toggle(
function() { enableRows(); },
function() { disableRows(); }
);
});
});
You can also optimize your enable disable code by removing loops and using proper selectors for desired element
$("#test1table").find("input,button,textarea,select").attr("disabled", "disabled");
or this