根据选择选项启用/禁用其他输入

Enable/Disable other inputs based on select option

本文关键字：其他输入启用选择选项更新时间：2023-12-06

我的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>

我的jquery函数：

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;
        }
    });
}

当我在新表单中使用该代码（添加新记录）时，效果很好，但当我加载它来编辑现有记录时，它不起作用，因为应该启用/禁用的字段没有启用或禁用

编辑：问题不在于检索要编辑的数据，当我检索数据时，如果$（#tipoPre）.val（）="Entrega personal"，则字段#monDev、#monMin、#monMax、#monPre、#acmulado应被禁用，其余应启用

更改事件将在document.ready而不是validateFieldsOnChange中注册，以在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);
    });
  });