Disable buttons in table based on the values in the first column
One approach, using jQuery, is the following:
// creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];
// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')
// and use the prop() method to update the value of the
// 'disabled' property:
.prop('disabled', function() {
// here we navigate from the current <input> to the closest
// ancestor <tr> element and from there find the td:first-child
// element and retrieve its text:
let firstColValue = $(this).closest('tr').find('td:first-child').text();
// here we return whether Boolean true (if the numeric value of the
// text in the first <td> is included in the array of values) or
// false (if that value is not in the array of values):
return disableValues.includes(+firstColValue);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="hidden" id="hdn_numbers" name="hdn_numbers" value="1,7">
<table class="table table-striped">
<thead>
<tr class="warning">
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>
test
</td>
<td>
<input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
</td>
</tr>
<tr>
<td>7</td>
<td>
test
</td>
<td>
<input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
</td>
</tr>
<tr>
<td>1</td>
<td>
test
</td>
<td>
<input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
</td>
</tr>
<tr>
<td>1</td>
<td>
test
</td>
<td>
<input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
</td>
</tr>
</tbody>
</table>
Turn off Disabled in the entire row in table when is button click
$('button').click(function (){
$(this).parents('tr').find('input').prop( "disabled", false );
});
How to disable button of one row based on input in td-element in same row?
your if
statement reads wrong. .val()
is used to get the value of a form element, input, select etc. use .html()
to check to text in the TD.
Try this -
$(function () {
$('table tr').each(function () {
if ($(this).find('.total').html() == 0.00) {
$(this).find('.settle-button').prop('disabled', true);
}
else {
$(this).find('.settle-button').prop('disabled', false);
}
});
});
Here is the update fiddle
Good point made by Karl-Andre - use .prop
.
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. To retrieve and change DOM properties such as
the checked, selected, or disabled state of form elements, use the
.prop() method.
.prop()
Disabling certain inputs in table on button press
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
How to disable text field which is present inside a 'td', when a button is press from the same row?
You can use .each() in jquery to be quick
you will be giving that input field a class name in order to style it anyways
$("table-class-name .input-class-name).each(function(){
$(this).attr("disabled","true");
});
You can bind this function to a click event
Disable click on a table td but activate click on div a the table
$('.right input[type="text"]').on('focus', function() { $('.left input[type="text"],.left button').attr('disabled', 'disabled'); $('.left').addClass('distd');})
$('.right input[type="text"]').on('blur', function() { $('.left input[type="text"],.left button').prop('disabled', false); $('.left').removeClass('distd');})
$('.left input[type="text"]').on('focus', function() { $('.right input[type="text"],.right button').attr('disabled', 'disabled'); $('.right').addClass('distd');})
$('.left input[type="text"]').on('blur', function() { $('.right input[type="text"],.right button').prop('disabled', false); $('.right').removeClass('distd');})
table,td { border: 1px solid black}
td { margin: 5px; padding: 5px;}
.distd { background-color: #ddd; cursor: not-allowed;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table> <tr> <td class="left"><input type="text" /></td> <td class="right"><input type="text" /></td> </tr> <tr> <td class="left"> <input type="text" /> </td> <td class="right"> <input type="text" /> <button>sample btn</button> </td> </tr> <tr> <td class="left"> <input type="text" /> </td> <td class="right"> <input type="text" /> </td> </tr> <tr> <td class="left"> <input type="text" /> </td> <td class="right"> <input type="text" /> </td> </tr></table><button>sample btn</button>
stop/disable button after x amount of clicks
You want to disable the button so there is an attribute in HTML, we can use that.
The thing is, you should keep the value of i == 0 instead of 1.
if(i == 5){
$("#addbutton").attr('disabled','disabled');
}
This is how you can add a disabled attribute. Hope this would help you.
Related Topics
Detect a Quotation in a String
Curl (7): Failed to Connect to Localhost Port 8000: Connection Refused
How to Get the Url of Currently Opened Tabs in All Browsers With PHP or JavaScript
Selected Value Get from Db into Dropdown Select Box Option Using PHP MySQL Error
Validating Base64 Encoded Images
Dynamic Menu and Role Permission in Codeigniter
Converting Soap Xml Response to a PHP Object or Array
How to Find Out If CSV File Fields Are Tab Delimited or Comma Delimited
Regex Optionally Match a Pattern Multiple Times
How to Check If MySQL Results Returned Empty in PHP
How to Download an Mp3 File from Remote Url
How to Run a PHP Script in the Background After a Form Is Submitted
Php - Mysqli_Fetch_Array() Expects Parameter 1 to Be Mysqli_Result, String Given
Regex to Check the String Contains Only Letter and Numbers But Not Only Numbers