1

我正在使用jq-idealforms来构建一个漂亮而简单的表单。在它我有一个无线电字段，我想在从 db 获取信息后用 jquery 填充。这里有一个示例（在“step2”.. 第 2 节），您可以观看 jq-ideal 和 radio-field 是如何工作的。它没有提供一个 api 来做到这一点，但如果我可以用 jquery 填充一个 input[type='text'] 元素，那么它也必须是可能的。

您可以在这里查看jq-idealforms 如何管理无线电场。

我尝试了以下代码部分：

  $(this).prop('checked', true);
  $(this).next().addClass('checked');

其中 $(this) 是 3 个无线电字段之一，它是我想要选择的一个（其余代码在示例中）：

  <input type="radio" name="radio" style="position: absolute; left: -9999px;" autocomplete="off">

“checked”类没有放在元素 span.ideal-radio （输入的兄弟）中。我确定 DOM，因为如果我使用另一个类，如“foo”，则会添加这个类。我认为这是插件的错误，但是什么？我该如何解决？

并且在我重新加载表单时，如文档中所述： $(form).data('idealforms').reload().fresh();

Textarea 元素和输入文本类型已正确填充。

编辑：

问题更简单，如果启用了 jq-idealforms，我无法选择单选框的第一个元素，如果我不使用 jq-idealforms，则选择第一个单选元素。或者，如果您在第二个单选元素上放置“选中”并使用 jq-idealforms，它也可以工作。

<html>
<head>
    <script src="js/lib/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="css/jquery.idealforms.min.css" media="screen"/>
    <script src="js/lib/jquery.idealforms.min.js"></script> <!-- removing it work -->
<head>
<body>
    <form id="form-doc" method="post" action="">
    <div>
        <label>Tipo doc:</label> 
        <input type="text" name="tipo_doc" />
    </div>
    <div>
        <label>Ruolo ditta:</label> 
        <label> 
            <input type="radio" name="ruolo_ditta" checked/>Fornitore
        </label> 
        <label> 
            <input type="radio" name="ruolo_ditta" /> Cliente
        </label>
    </div>
    <div>
        <button type="submit">Salva</button>
        <button id="reset" type="button">Reset</button>
    </div>
    </form>
    <script type="text/javascript">
    var options = {
        onFail: function() {alert( 'fail');},
        onSuccess: function() {alert( 'succes');},
        inputs: {
            'tipo_doc' : {
                filters: 'required min max',
                data: { min: 3, max: 16 },
            }, 
            'ruolo_ditta' : {
                filters: 'required min',
                data: { min: 1 },
            }, 
        }
    };
    var myform = $('#form-doc').idealforms(options).data('idealforms');
    $('#reset').click(function(){
        myform.reset().fresh().focusFirst();
    });
    myform.focusFirst();
</script>`
</body>
</html>

它不适用于 jquery-1.9.1 和 jquery-1.10.1。

解决方案：

单选按钮的文档错误。您可以在现场阅读：

必需的

该字段是必需的。此过滤器仅适用于文本输入（文本、密码、文本区域）。对于选择使用排除排除默认选项。对于收音机和复选框，请使用 min: 1 ，这将需要至少检查一个选项。

但是使用：

'ruolo_ditta' : {
    filters: 'min',
    data: { min: 1 },
}

或在 Idealforms 选项上组合使用“必需”过滤器（或仅需要过滤器），其中“ruolo_ditta”是单选元素的属性名称的值。表单做出错误且非常奇怪的行为。

删除它，在第一个无线电 html 元素上使用检查效果很好，并且

$(this).prop('checked', true).trigger('change');

像方面一样工作。

谢谢，j。

4

2 回答 2

0

该插件从检查的实际属性中抽象出检查的视觉指示，因此您必须做以下两件事之一：

  • 通过编程点击触发检查：

$(this).trigger('click');

这就好像您实际上是在单击复选框。但这也可以取消选中以前选中的框。如果这不是您想要的，请使用选项 2 确保已检查

  • 确保已检查：

$(this).prop('checked', true).trigger('change');

于 2013-09-24T23:56:52.443 回答
0

reload如果您要更改值项目文档，则必须调用表格

于 2013-09-24T23:56:23.113 回答