Im having troubles with the removal of the correct input texboxes once these have been generated.
Basically the code generates a text input when a checkbox is selected. The generated text input contains the value of the selected checkbox. All this works fine as well does the dependency of the checkboxes selection.
Where I need help is to remove the actual input that contains the value of the de-selected checkbox. right now the one removes is always the last input box instead of the one corresponding to the checkbox being clicked.
The second problem is the following. The checkboxes are organized in pairs. but you can only select one checkbox per pair, this works fine, but I go from one checkbox to the other and the previous is automatically unchecked the input box has to be removed as well.
Here is the working code:
$(function() {
// Moneyline Visitor
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
var arrmlv = $("#mlv").map(function() { return $(this).val(); }).get();
$('#mlv').change(function () {
if ($('#mlv').is(':checked')) {
$('<input type="text" id="p_scnt'+ i +'" class="p_scnt'+ i +'" size="20" name="p_scnt_' + i +'" value="'+ arrmlv +'" placeholder="No Disponible" />').appendTo(scntDiv);
i++;
$("input[name='rlo']").attr("disabled", true);
$("input[name='rlu']").attr("disabled", true);
$("input[name='mll']").prop('checked', false);
} else if ($('#mlv').not(':checked')) {
i--;
$("input[name='rlo']").attr("disabled", false);
$("input[name='rlu']").attr("disabled", false);
$('.p_scnt'+ i +'').remove();
}
});
// Moneyline Local
var arrmll = $("#mll").map(function() { return $(this).val(); }).get();
$('#mll').change(function () {
if ($('#mll').is(':checked')) {
$('<input type="text" id="p_scnt'+ i +'" class="p_scnt'+ i +'" size="20" name="p_scnt_' + i +'" value="'+ arrmll +'" placeholder="No Disponible" />').appendTo(scntDiv);
i++;
$("input[name='rlo']").attr("disabled", true);
$("input[name='rlu']").attr("disabled", true);
$("input[name='mlv']").prop('checked', false);
} else if ($('#mll').not(':checked')) {
i--;
$("input[name='rlo']").attr("disabled", false);
$("input[name='rlu']").attr("disabled", false);
$('.p_scnt'+ i +'').remove();
}
});
// Runline Over
var arrrlo = $("#rlo").map(function() { return $(this).val(); }).get();
$('#rlo').change(function () {
if ($('#rlo').is(':checked')) {
$('<input type="text" id="p_scnt'+ i +'" class="p_scnt'+ i +'" size="20" name="p_scnt_' + i +'" value="'+ arrrlo +'" placeholder="No Disponible" />').appendTo(scntDiv);
i++;
$("input[name='mlv']").attr("disabled", true);
$("input[name='mll']").attr("disabled", true);
$("input[name='rlu']").prop('checked', false);
} else if ($('#rlo').not(':checked')) {
i--;
$("input[name='mlv']").attr("disabled", false);
$("input[name='mll']").attr("disabled", false);
$('.p_scnt'+ i +'').remove();
}
});
// Runline Under
var arrrlu = $("#rlu").map(function() { return $(this).val(); }).get();
$('#rlu').change(function () {
if ($('#rlu').is(':checked')) {
$('<input type="text" id="p_scnt'+ i +'" class="p_scnt'+ i +'" size="20" name="p_scnt_' + i +'" value="'+ arrrlu +'" placeholder="No Disponible" />').appendTo(scntDiv);
i++;
$("input[name='mlv']").attr("disabled", true);
$("input[name='mll']").attr("disabled", true);
$("input[name='rlo']").prop('checked', false);
} else if ($('#rlu').not(':checked')) {
i--;
$("input[name='mlv']").attr("disabled", false);
$("input[name='mll']").attr("disabled", false);
$('.p_scnt'+ i +'').remove();
}
});
// Over
var arrov = $("#ov").map(function() { return $(this).val(); }).get();
$('#ov').change(function () {
if ($('#ov').is(':checked')) {
$('<input type="text" id="p_scnt'+ i +'" class="p_scnt'+ i +'" size="20" name="p_scnt_' + i +'" value="'+ arrov +'" placeholder="No Disponible" />').appendTo(scntDiv);
i++;
$("input[name='un']").prop('checked', false);
} else if ($('#ov').not(':checked')) {
i--;
$('.p_scnt'+ i +'').remove();
}
});
// Under
var arrun = $("#un").map(function() { return $(this).val(); }).get();
$('#un').change(function () {
if ($('#un').is(':checked')) {
$('<input type="text" id="p_scnt'+ i +'" class="p_scnt'+ i +'" size="20" name="p_scnt_' + i +'" value="'+ arrun +'" placeholder="No Disponible" />').appendTo(scntDiv);
i++;
$("input[name='ov']").prop('checked', false);
} else if ($('#un').not(':checked')) {
i--;
$('.p_scnt'+ i +'').remove();
}
});
});
<script src="http://ift.tt/VorFZx"></script>
<input type="checkbox" id="mlv" name="mlv" value="+200"/>
<input type="checkbox" id="mll" name="mll" value="-200"/>
<input type="checkbox" id="rlo" name="rlo" value="+100"/>
<input type="checkbox" id="rlu" name="rlu" value="-100"/>
<input type="checkbox" id="ov" name="ov" value="+300"/>
<input type="checkbox" id="un" name="un" value="-300"/>
</br>
<div id="p_scents">
</div>
Thaks in advance Alex
Aucun commentaire:
Enregistrer un commentaire