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

http://jsfiddle.net/uzCta/2/ Here's my updated fiddle.

Things of note:

  • move the event handling out of the nesting
  • trigger the active item events so it forces initial state (useful when editing, if already other selected, it'll re-initialize the expanded other check box)
  • changed the handler to handle any click on any radio button in the group, so it knows to hide/show the other box properly.

Here's the important code:

$(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
});

EDIT: Two inconsistencies worth noting. I deviated from your sample a bit. :input[name...] should just be input[name...] or I should have changed it above as well in your click handler. And I left your $(hide) wrapper but below called hide.hide() directly without wrapping. Since this is already a jquery object, no need to wrap it in $(). But I will leave the answer as is, as it doesn't affect the results.

于 2013-03-14T20:54:10.537 回答
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 回答
0

听起来您可以使用切换功能在显示和隐藏之间切换。 http://api.jquery.com/toggle-event/

这是在相关线程中如何使用它的示例。jquery toggle - 在切换功能之间切换？

于 2013-03-14T20:48:46.250 回答