0

このスニペットは、チェックボックスがクリックさ#typeOtherれたときに入力されたテキストを正常に表示します。#securityClただし、ユーザーが別のラジオボタンに切り替えた場合、または#securityClチェックボックスをもう一度クリックして入力を完全に無効にした場合に不要なテキストを含むフォームを送信しないように、#typeOtherテキスト入力を非表示にしてクリアしたいと思います。

HTML：

   <table>
        <tr>
            <td>
                <input type="checkbox" id="securityCl" name="securityCL">
                <label for="securityCl">Security Clearance - Type:</label>
            </td>
        </tr>
        <tr>
            <td class="indent">
                <input type="radio" id="typeTsSci" name="securityType" disabled="disabled">
                <label for="typeTsSci">TS/SCI</label>
            </td>
            <td>
                <input type="radio" id="typeS" name="securityType" disabled="disabled">
                <label for="typeS">S</label>
            </td>
        </tr>
        <tr>
            <td class="indent">
                <input type="radio" id="typeTs" name="securityType" disabled="disabled">
                <label for="typeTs">TS</label>
            </td>
            <td>
                <input type="radio" id="typeOther" name="securityType" disabled="disabled">
                <label for="typeOther">Other:</label><br>
            </td>
            <td>
                <input type="text" id="otherText" name="securityType" disabled="disabled">
            </td>
        </tr>
    </table>

そしてこれが私のjQueryです：

    $(function() {
        var hide = $('#otherText').hide();
        $('#securityCl').click(function() {
            $('input[name="securityType"]').prop('disabled', !this.checked);
            $('#typeOther').click(function() {
                $(hide).show();
            });
        });
    });
4

3 に答える 3

1

これを試して：

 var hide = $('#otherText').hide();
 $('#securityCl').click(function () {
     $('input[name="securityType"]').prop('disabled', !this.checked);
     $('input[name="securityType"]').click(function () {
         if ($('#typeOther').is(':checked')) {
             $('#otherText').show();
         } else {
             $('#otherText').hide();
         }
     });
 });

jsFiddleの例

于 2013-03-14T20:46:39.840 に答える
1

http://jsfiddle.net/uzCta/2/これ が私の更新されたフィドルです。

注意事項：

  • イベント処理をネストから移動します
  • アクティブアイテムイベントをトリガーして、初期状態を強制します（編集時に役立ちます。すでに他が選択されている場合は、展開された他のチェックボックスが再初期化されます）
  • グループ内の任意のラジオボタンのクリックを処理するようにハンドラーを変更したため、他のボックスを適切に表示/非表示にすることができます。

重要なコードは次のとおりです。

$(function() {
    var hide = $('#otherText').hide();

    $('input[name="securityType"]').prop('disabled', !$('#securityCl').prop('checked'));

    $('#securityCl').click(function() {
        $('input[name="securityType"]').prop('disabled', !$(this).prop('checked'));
    });

    $('input[name="securityType"]').click(function()
    {
        if($('#typeOther').is(':checked'))
            hide.show();
        else
            hide.hide();
    });

    $('input[name="securityType"]:checked').trigger('click'); // trigger an initial state change
});

編集：注目に値する2つの矛盾。私はあなたのサンプルから少し逸脱しました。 クリックハンドラーで、上記のように変更する必要があります:input[name...]。input[name...]そして、私はあなたの$(hide)ラッパーを残しましたが、以下はhide.hide()ラップせずに直接呼び出されました。これはすでにjqueryオブジェクトであるため、でラップする必要はありません$()。ただし、結果には影響しないため、回答はそのままにしておきます。

于 2013-03-14T20:54:10.537 に答える
0

トグル機能を使用して、表示と非表示を切り替えることができるようです。 http://api.jquery.com/toggle-event/

関連するスレッドでの使用例を次に示します。jqueryトグル-トグル機能を切り替えますか？

于 2013-03-14T20:48:46.250 に答える