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 つのラジオ フィールドの 1 つであり、選択したいものです (残りのコードは例にあります):

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

クラス "checked" は要素 span.ideal-radio (input の兄弟) に入れられません。「foo」のような別のクラスを使用すると、これが追加されるため、DOM は確かです。これはプラグインのバグだと思いますが、何ですか？どうすれば解決できますか？

そして、ドキュメントで説明されているようにフォームをリロードします: $(form).data('idealforms').reload().fresh();

Textarea 要素と入力テキスト タイプが正しく入力されます。

編集：

問題はより単純です。jq-idealforms が有効になっている場合、ラジオ チェックボックスの最初の要素を選択できません。jq-idealforms を使用しない場合、最初のラジオ要素が選択されます。または、2 番目の radio-element に「checked」を配置し、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 では動作しません。

解決：

ラジオ ボタンのドキュメントが間違っています。サイトで読むことができます：

必要

フィールドは必須です。このフィルターは、テキスト入力 (テキスト、パスワード、テキストエリア) でのみ機能します。select の場合、exclude を使用してデフォルトのオプションを除外します。ラジオとチェックボックスには min: 1 を使用します。これには、少なくとも 1 つのオプションをオンにする必要があります。

しかし、使用：

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

または、「ru​​olo_ditta」が無線要素の属性名の値である、idealforms オプションで「必要な」フィルター (または必要なフィルターのみ) を組み合わせたもの。フォームは間違った、本当に奇妙な動作をします。

それを削除し、最初のラジオ html 要素でチェックを使用するとうまく機能し、

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

アスペクトとして機能します。

ありがとう、j。

4

2 に答える 2

0

値のプロジェクト ドキュメントreloadを変更する場合は、フォームを呼び出す必要があります。

于 2013-09-24T23:56:23.113 に答える
0

プラグインは、check の実際のプロパティから check の視覚的表示を抽象化するため、次の 2 つのいずれかを行う必要があります。

  • プログラムによるクリックでチェックをトリガーします。

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

これは、実際にチェックボックスをクリックしているかのようです。ただし、これにより、以前にチェックしたボックスのチェックを外すこともできます。それが望ましくない場合は、オプション 2 を使用して、それがチェックされていることを確認します

  • チェックされていることを確認します。

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

于 2013-09-24T23:56:52.443 に答える