我已经尝试解决这个问题了好几天。.我必须进行一次在线调查,该表单是根据用户先前的一些选择动态加载的。.这意味着我不能使用“名称”或“ id”输入的属性,因为它们并不总是相同。我正在使用Jquery validate插件进行所有必需的输入,并且工作正常。但是我的问题是:
有些问题取决于前一个问题的回答,这不仅意味着应该回答前一个问题,而且还需要特定的答案。 (例如:“您喜欢水果吗?”,如果答案为“是”,则显示另一个问题“您通常吃哪些水果?”,如果回答为“否”,则要求输入“否”,则不显示问题完全没有
我以为我会在数据库“问题”表中添加一个字段“ depend”,以使某些问题依赖于其他问题,但是依赖的类型因一个问题而异。
如果我有一个静态表单,这将非常容易,但是事实并非如此。
请帮忙!
最佳答案
我将html5 data-
属性用于一些自定义属性来对此进行归档:
的HTML:
<input type="checkbox" data-dependid="test" />
<input type="text" data-dependid="test2" data-dependedid="test" data-dependedvalue="true" data-dependedtype="disabled" disabled="disabled" />
<input type="text" data-dependedid="test2" data-dependedvalue="input" data-dependedtype="disabled" disabled="disabled" />
jQuery的:
$(function() {
$("[data-dependid]").die().live("change keyup", function () {
var that = this;
var depends = $("[data-dependedid='" + $(that).attr("data-dependid") + "']");
depends.each(function (i, depend) {
var isSame = false;
if (($(that).is(":checked") + "" == $(depend).attr("data-dependedvalue")) || ($(that).val() == $(depend).attr("data-dependedvalue"))) {
isSame = true;
}
$(depend).attr($(depend).attr("data-dependedtype"), !isSame); //works for checked and disabled
});
});
});
这使得第一个文本框取决于该复选框。
第二个文本框取决于第一个文本框的值(输入)。
看到这个fiddle
要添加显示选项,请在foreach中添加:
var isSame = false;
if (($(that).is(":checked") + "" == $(depend).attr("data-dependedvalue")) || ($(that).val() == $(depend).attr("data-dependedvalue"))) {
isSame = true;
}
if ($(depend).attr("data-dependendtype") == "display") {
if (!isSame)
$(depend).fadeOut();
else
$(depend).fadeIn();
}
else {
$(depend).attr($(depend).attr("data-dependedtype"), !isSame);
}