CODEWITHSUNDEEP
javascriptjqueryhtml
user1090847
user1090847

Reputation:

Enable/Disable other inputs based on select option

My HTML

<fieldset>
    <label for="tipoPre">Tipo de premio</label>
    <select id="tipoPre"><option value="Devolución de consumo">Devolución de consumo</option>
    <option value="Devolución de consumo de premio acumulado">Devolución de consumo de premio acumulado</option>
    <option value="Entrega individual">Entrega individual</option>
    <option value="Premio monetario">Premio monetario</option>
    </select>
    <label for="monDev">Monto devolucion</label>
    <select id="monDev">
    <option value="Monto acumulado">Monto acumulado</option>
    <option value="Monto del cupón">Monto del cupón</option>
    </select>
    <label for="numGanadores">Numero de ganadores</label>
    <input type="text" class="text ui-widget-content ui-corner-all" id="numGanadores" name="numGanadores">
    <label for="numSuplentes">Numero de suplentes</label>
    <input type="text" class="text ui-widget-content ui-corner-all" id="numSuplentes" name="numSuplentes">
    <label for="monMin">Monto minimo</label>
    <input type="text" class="text ui-widget-content ui-corner-all" id="monMin" name="monMin">
    <label for="monMax">Monto maximo</label>
    <input type="text" class="text ui-widget-content ui-corner-all" id="monMax" name="monMax">
    <label for="monPre">Monto premio</label>
    <input type="text" class="text ui-widget-content ui-corner-all" id="monPre" name="monPre">
    <label for="acumulado">Acumulado a repartir</label>
    <input type="text" class="text ui-widget-content ui-corner-all" id="acumulado" name="acumulado">
</fieldset>

My jquery function:

function validateFieldsOnChange() {
    $("#monDev").prop('selectedIndex', -1);
    $("#tipoPre").prop('selectedIndex', -1);

    $("#tipoPre").change(function () {
        switch ($('#tipoPre option:selected').attr('value')) {
            case 'Entrega individual':

                $("#monDev, #monMin, #monMax, #monPre, #acumulado").attr('disabled', 'disabled');
                break;
            case 'Premio monetario':

                $("#monDev, #monMin, #monMax, #acumulado").attr('disabled', 'disabled');
                break;
            case 'Devolución de consumo':

                $("#monPre, #acumulado").attr('disabled', 'disabled');
                break;
            case 'Devolución de consumo de premio acumulado':

                $("#monPre, #numGanadores").attr('disabled', 'disabled');
                break;
            default:

                break;
        }
    });

}

When i use that code in a new form (add new record) works fine, but when i load it up to edit a existent record it doesnt work because the fields that should be enabled/disabled arent enabled or disabled

EDIT: The problem is not retrive the data to edit, when i retrieve the data i load it up the form if $(#tipoPre).val() = 'Entrega individual' the fields #monDev, #monMin, #monMax, #monPre, #acumulado should be disabled an the rest enabled

Upvotes: 0

Views: 557

Answers (1)

Adil
Adil

Reputation: 148180

Change event would be registered in document.ready instead of validateFieldsOnChange to produce the required results on change of select

$(function(){

function validateFieldsOnChange() {
    $("#monDev").prop('selectedIndex', -1);
    $("#tipoPre").prop('selectedIndex', -1);
});

$("#tipoPre").change(function () {
    switch ($('#tipoPre option:selected').attr('value')) {
        case 'Entrega individual':
            resetValues();
            $("#monDev, #monMin, #monMax, #monPre, #acumulado").attr('disabled', 'disabled');
            break;
        case 'Premio monetario':
            resetValues();
            $("#monDev, #monMin, #monMax, #acumulado").attr('disabled', 'disabled');
            break;
        case 'Devolución de consumo':
            resetValues();
            $("#monPre, #acumulado").attr('disabled', 'disabled');
            break;
        case 'Devolución de consumo de premio acumulado':
            resetValues();
            $("#monPre, #numGanadores").attr('disabled', 'disabled');
            break;
        default:

            break;
    });
   $("#sorPorFecha").click(function() {
    (typeof $("#sorPorFecha").attr('checked') != 'undefined') ?         $('#unicoPorFecha').removeAttr('disabled') : $('#unicoPorFecha').attr('disabled', 'disabled');
       $('#unicoPorFecha').prop('checked', false);
    });

  });

Upvotes: 1

Related Questions