Question

我有一个webform来输入我使用jQuery UI设计样式的联系人的物理地址。在我的应用程序代码中，我检查是否存在辅助地址行（如公寓或套件编号），并通过隐藏元素来相应地显示或隐藏辅助地址行。我还有一个jQuery UI“Plus”按钮，可以在新表单或现有表单上添加一行，默认情况下只显示一行。辅助线的“减号”按钮与“加号”按钮完全相同，可在必要时删除辅助线。

如果用户单击加号按钮，则显示辅助线，并且加号按钮设置为禁用。

表单还有一个标准的HTML重置按钮，用于将表单重置为默认值。使用我添加的javascript，一切正常，除非有可见的辅助地址行（因此Plus按钮设置为禁用）。如果在禁用加号按钮时单击重置按钮，则会将其设置为启用，即使有可见的辅助街道地址行也应禁用。

我已经设置了一个简单的表单来显示此行为：jQuery UI Reset Button Form。默认情况下，此表单应禁用加号按钮，如果单击重置按钮，它将按照我的解释启用。

如何阻止HTML表单在不应该启用时显示？

Answer 1

很好的挑战。将事件“恢复”元素重置为其初始状态，因此您的add_address_line锚点必须以disabled属性开头。

所以你的初始标记应该是这样的：

<a id="add_address_line" disabled="true" ...></a>

这样，当表单重置时，您的a将返回禁用状态。

希望这会有所帮助。请告诉我，如果它不起作用（它应该），我有一个B计划呵呵。

编辑：由于重置不会影响主播，您可以绑定重置事件（B计划）：

$("#myform").bind('reset', function(){
   setTimeout(function(){  //This is needed
      $("#add_address_line").button("disable");
   }, 10);
});

对于跨浏览器解决方案，setTimeout是必需的，因为在某些浏览器中，重置事件会在元素实际重置之前触发。有了这么小的延迟，就完成了。

干杯

Answer 2

尝试使用toggle()而不是启用/禁用按钮。你的js逻辑也非常复杂，我想你可以用很少的代码实现它，而不是你在js函数中编写的一堆代码。

:: UPDATE :: 替换你的代码：

$('input#reset_button').bind('mouseup', function(event) {
                    if ($('#address_field_two').is(':hidden')) {
                        $('a.address_line_button#add_address_line').click();
                    };
                });

以下：

   $('input#reset_button').bind('mouseup', function(event) {
   var inp = $("#address_entry_address_two").val();
   if(jQuery.trim(inp).length <= 0)
   {
       $('a.address_line_button#remove_address_line').click();
   }});

以下是工作jsFiddle链接。

表单重置按钮改变了jQuery-UI元素

2 个答案: