jeudi 27 août 2015

Dinamically generate / remove text inputs with checkboxes jQuery

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