1

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

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

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

任何帮助将不胜感激

4

1 回答 1

0

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

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

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

$(document).ready(function() {
  $('input[name="custom"]').trigger("change");
}
于 2015-03-03T03:45:45.337 回答