I have a table whose first column is an input and the rest of the columns is a group of radio buttons. This first input can only be informed values from 1 to 4. The Radio buttons start disabled, and can only be selected if the input value is 3 or 4. I managed to work on something else only with fixed values of ID and RadioButton.
Follow the code below:
$('.btn-number').click(function(e){
e.preventDefault();
var fieldName = $(this).attr('data-field');
var type = $(this).attr('data-type');
var input = $("input[name='"+fieldName+"']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if(type == 'minus') {
var minValue = parseInt(input.attr('min'));
if(!minValue) minValue = 1;
if(currentVal > minValue) {
input.val(currentVal - 1).change();
}
if(parseInt(input.val()) == minValue) {
$(this).attr('disabled', true);
}
} else if(type == 'plus') {
var maxValue = parseInt(input.attr('max'));
if(!maxValue) maxValue = 9999999999999;
if(currentVal < maxValue) {
input.val(currentVal + 1).change();
}
if(parseInt(input.val()) == maxValue) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
$('.input-number').focusin(function(){
$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
var minValue = parseInt($(this).attr('min'));
var maxValue = parseInt($(this).attr('max'));
if(!minValue) minValue = 1;
if(!maxValue) maxValue = 4;
var valueCurrent = parseInt($(this).val());
var name = $(this).attr('name');
if(valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
$(this).val($(this).data('oldValue'));
}
if(valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
$(this).val($(this).data('oldValue'));
}
});
$(".input-number").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="table-responsive">
<table id="tabela_amostras" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th class="all" align="center"><h3 class="panel-title" align="center">Amostra</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Nota</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Pele</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Azedo</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Gordura</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Alcalino</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Ácido</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Anti Esp.</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Doce</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Ração</h3></th>
<th class="all" align="center"><h3 class="panel-title" align="center">Sabão</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td class="all" align="center">150</td>
<td class="all" align="center">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="num">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input class="form-control input-number" id="nota" name="num" placeholder="Nota" type="text" class="nota" min="1" max="4">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="num">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</td>
<td class="all" align="center">
<input type="radio" name="groupRadio1" id="pele" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="azedo" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="gordura" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="alcalino" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="acido" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="anti" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="doce" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="racao" autocomplete="off">
</td>
<td class="all"align="center">
<input type="radio" name="groupRadio1" id="sabao" autocomplete="off">
</td>
</tr>
</tbody>
</table>
</div>
</div> There's also fiddle .
I can not think of a way to disable the Radio Button group automatically with JavaScript.