Disable the Button in the Table Based on the Td Text

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



Leave a reply



Submit