Как добавить и убрать атрибут disabled кнопке добавления строк если на странице уже 10 строк?и если атрибут добавляется то при переходе на другой check box спадает с кнопки добавления строк и столбцов. Я уже запутался и логика здесь глупая.Как можно обойтись меньшим кодом и с делегированием?
var addplace = function placeHold() {
$('.matrix_a tr').each(function(i,v){//loop each row
$(v).find('td').each(function(x,d){//loop each colon in that row
$(d).find('input').attr('placeholder','a'+(i+1)+','+(x+1));//change the input placeholder
})
})
};
var addplaceh = function placeHold() {
$('.matrix_b tr').each(function(i,v){//loop each row
$(v).find('td').each(function(x,d){//loop each colon in that row
$(d).find('input').attr('placeholder','b'+(i+1)+','+(x+1));//change the input placeholder
})
})
};
$('.add_str').click(function(){
if ($("#check_mtrx_a").prop("checked")){
$('.matrix_a tr:first').clone().appendTo('.matrix_a').add(addplace);
}else if($("#check_mtrx_b").prop("checked")) {
$('.matrix_b tr:first').clone().appendTo('.matrix_b').add(addplaceh);
}
});
if ($('.matrix_a tr td').length > 4) {
$('.del_str').removeAttr("disabled").click(function(){
if ($("#check_mtrx_a").prop("checked")){
$('.matrix_a tr:last').remove();
}else if($("#check_mtrx_b").prop("checked")) {
$('.matrix_b tr:last').remove();
}
});
}
$('.add_col').click(function(){
if ($("#check_mtrx_a").prop("checked")){
$('.matrix_a tr td:last').clone().appendTo('.matrix_a tr').add(addplace);
}else if($("#check_mtrx_b").prop("checked")) {
$('.matrix_b tr td:last').clone().appendTo('.matrix_b tr').add(addplaceh);
}
});
if ($('.matrix_a tr').length > 2) {
$('.del_col').removeAttr("disabled").click(function(){
if ($("#check_mtrx_a").prop("checked")){
$('.matrix_a tr td:last-child').remove();
}else if($("#check_mtrx_b").prop("checked")) {
$('.matrix_b tr td:last-child').remove();
}
});
}
$(document).on('click' , '.add_str', function() {
if ($("#check_mtrx_a").prop("checked")){
if ($('.matrix_a tr').length === 10){
$('.add_str').attr('disabled', 'disabled');
}
}
if ($("#check_mtrx_b").prop("checked")){
if ($('.matrix_b tr').length === 10){
$('.add_str').attr('disabled', 'disabled');
}
}
});
$(document).on('click' , '.del_str', function() {
if ($("#check_mtrx_a").prop("checked")){
if ($('.matrix_a tr').length <10){
$('.add_str').removeAttr('disabled');
}
}
if ($("#check_mtrx_b").prop("checked")){
if ($('.matrix_b tr').length <10){
$('.add_str').removeAttr('disabled');
}
}
});
$(document).on('click' , '.add_col', function() {
if ($("#check_mtrx_a").prop("checked")){
if ($('.matrix_a tr:first td').length >= 10){
$('.add_col').attr('disabled', 'disabled');
}
}
if ($("#check_mtrx_b").prop("checked")){
$(".add_col").removeAttr('disabled')
if ($('.matrix_b tr:first td').length === 10){
$('.add_col').attr('disabled', 'disabled');
}
}
});
$(document).on('click' , '.del_col', function() {
if ($("#check_mtrx_a").prop("checked")){
if ($('.matrix_a tr td').length <10){
$('.add_col').removeAttr('disabled');
}
}
if ($("#check_mtrx_b").prop("checked")){
if ($('.matrix_b tr:first-child td').length <10){
$('.add_col').removeAttr('disabled');
}
}
});
.matrix_a_cover {
float: left;
}
.matrix_b_cover {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="add_mtrx">
<span class="rad btn_a">
<label for="matrix_a">
<input checked="checked" name="mtrx_sel" type="radio" value="mtrx_a" id="check_mtrx_a">Матрица А
</label>
</span>
<span class="rad btn_b">
<label for="matrix_b">
<input type="radio" name="mtrx_sel" value="mtrx_b" id="check_mtrx_b">Матрица В
</label>
</span>
<br>
<div class="add_del_btns">
<button class="add_str btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
<button class="del_str btn-style" type="button" ><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button>строку
<br>
<button class="add_col btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
<button class="del_col btn-style" type="button" ><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button>столбец
</div>
</div>
<div class="matrix_a_cover">
<table class="matrix_a brackets" id="matrix_a">
<tr>
<td class="str_inp">
<input type="text" placeholder="a1,1">
</td>
<td class="str_inp">
<input type="text" placeholder="a1,2">
</td>
</tr>
<tr>
<td class="str_inp">
<input type="text" placeholder="a2,1">
</td>
<td class="str_inp">
<input type="text" placeholder="a2,2">
</td>
</tr>
<tr>
<td class="str_inp">
<input type="text" placeholder="a3,1">
</td>
<td class="str_inp">
<input type="text" placeholder="a3,2">
</td>
</tr>
<tr>
<td class="str_inp">
<input type="text" placeholder="a4,1">
</td>
<td class="str_inp">
<input type="text" placeholder="a4,2">
</td>
</tr>
</table>
</div>
<div class="matrix_b_cover">
<table class="matrix_b brackets" id="matrix_b">
<tr>
<td class="str_inp">
<input type="text" placeholder="b1,1">
</td>
<td class="str_inp">
<input type="text" placeholder="b1,2">
</td>
<td class="str_inp">
<input type="text" placeholder="b1,3">
</td>
</tr>