Question

我将数据库表中的数据直接加载到表单的下拉框中。我试图检查页面加载是否在此框中设置了特定值，如果是，我想启用另一个默认禁用和隐藏的下拉框。

我使用Chronoforms v5进行表单创建（joomla），我设置了启用＆amp;如果在第一个下拉框中选择了特定值，则显示第二个下拉框;如果在第一个下拉列表中没有选择任何值，或者一个值与我想要的值不同，则显示第二个下拉框，我禁用＆amp;隐藏第二个下拉框。但是这些事件只在用户主动更改第一个下拉框中的值后才会发生。我也需要在页面加载时发生事件。

Chronoform的javascript是

function chronoforms_fields_events(){

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() == 'United_States'){
            $(':input[name="state"]').prop('disabled', false);
        }
    });

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() == 'United_States'){

            if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){
                $(':input[name="state"]').closest('.gcore-subinput-container').show();
                }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){
                $(':input[name="state"]').closest('.gcore-form-row').show();
            }

        }
    });

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() != 'United_States'){

            if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){
                $(':input[name="state"]').closest('.gcore-subinput-container').hide();
                }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){
                $(':input[name="state"]').closest('.gcore-form-row').hide();
            }

        }
    });

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() != 'United_States'){
            $(':input[name="state"]').prop('disabled', true);
        }
    });

    $(':input[name="custom"]').on('click', function(){
        if($(this).prop('checked')){
            $(':input[name="state"]').prop('disabled', false);
        }
    });
}
chronoforms_fields_events();

我目前在HTML（渲染表单）之前添加此javascript，但它不起作用

 function validatecountry(){
 if ($("#custom").prop("selectedIndex", 'United_States')){
          $(':input[name="state"]').prop('disabled', false);
    if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){
                     $(':input[name="state"]').closest('.gcore-subinput-container').show();
                }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){
                $(':input[name="state"]').closest('.gcore-form-row').show();
            }

 }
 }
 validatecountry();

非常感谢任何帮助

Answer 1

如果您在表单呈现之前调用此函数，$("#custom")，$('input[name="state"]')等将不会返回任何内容。因此你的代码不起作用。将呼叫添加到就绪事件中：

$(document).ready(function() {
  validatecountry();
}

在问题的第一部分，您可以在DOM准备就绪后手动触发输入字段的更改，这将调用更改例程：

$(document).ready(function() {
  $('input[name="custom"]').trigger("change");
}

使用jquery检查是否选择了特定的下拉选项，如果是，则启用/显示隐藏/禁用的下拉框

1 个答案: