Question

我已经看到了很多动态添加行或字段的帮助，但我对控制彼此依赖的字段感兴趣。

例如，我有一个包含3个用户输入的表单：

<select id="foo">
  <option value="0">No</option>
  <option value="1">Yes</option>
</select>

当#foo的值设置为1时，我想启用#bar。

<!-- by default, bar should be disabled -->
<select id="bar">
  <option value="something_1">Something 1</option>
  <option value="something_2">Something 2</option>
  <option value="other">Other...</option>
</select>

当#bar的值设置为other时，我想启用#baz。

<!-- by default, baz should be disabled -->
<textarea id="baz"></textarea>

我的目标

我想写一些关于编写一个小插件的指导，该插件允许轻松创建具有依赖关系的表单输入。

我想要简洁明了的语法。有没有办法可以添加html属性助手来帮助jQuery插件“自动化”事物？

可预见的问题

如果#foo设置为“是”，则#bar设置为“其他”，然后#foo设置为“否”，我将需要#bar的依赖关系也已停用/隐藏。
启用/禁用和/或可见/隐藏输入;能够为元素定义自定义行为会很不错。

重新发明轮子

如果有插件可以做这种事情，请告诉我！我似乎找不到一个......

Answer 1

您需要关注.change()事件的事件处理作为切入点。处理程序可以在JSON结构中查找表单元素id和值，以确定需要执行的操作（如果有）。 javascript可能如下所示：

form = {"input1" : 
    {"value1": {
        /*action list */
        [{"hide": ["input2", "input3"], "show": ["input4"], "set": {"input5": "True", "input6": "False"}]
    },
    "value2": {[/* another set of actions */]}
}


function onchange(e) {
    id = $(this).attr("id");
    value = $(this).val();
    if (id in form) {
        if (value in form[id]) {
            $.each(form[id][value], function(i, action) {
                if ("hide" in action) { $(action).hide(); }
                /* etc for other actions */
            });
        }
    }
}

$(document).ready(function() {$("input").change(onchange);}

Answer 2

快速插件

(function($){

  $.fn.inputDependsOn = function(id, values, options){

    var self = this;

    // methods
    this.disable = function(e){
      return e.addClass(options.cssClass).attr({disabled: true}).trigger("disable");
    };

    this.enable = function(e){
      return e.removeClass(options.cssClass).attr({disabled: null}).trigger("enable");
    };

    // options
    options = $.extend({}, $.fn.dependsOn.defaults, options || {});

    var parent = $(id);

    this.each(function(){
      var child = $(this);

      // parent binds
      parent
        .bind("change", function(){
          var v = parent.val();
          if(parent.is(":not(:disabled)") && v in values){
            self[values[v]](child);
          }
          else {
            self[options.init](child);
          }
          child.change();
        })
        .bind("disable", function(){
          self.disable(child);
        })
      ;
    });

    // init
    parent.change();
    return this;
  };

  $.fn.dependsOn.defaults = {
    init: "disable",
    cssClass: "disabled"
  };

})(jQuery);

在原始问题中使用HTML，目标可以通过以下方式完成：

$("#bar").inputDependsOn("#foo", {"1": "enabled"});
$("#baz").inputDependsOn("#bar", {"other": "enable"});

此插件将在此维护并更新：

github.com/macek/jquery-input-depends-on

如何使用jQuery创建动态表单？

我的目标

可预见的问题

重新发明轮子

2 个答案:

此插件将在此维护并更新：