Question

当点击复选框#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();
            });
        });
    });

Answer 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 example

Answer 2

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

编辑：值得注意的两个不一致。我稍微偏离了你的样本。 :input[name...]应该只是input[name...]，或者我应该在您的点击处理程序中更改它。我离开了你的$(hide)包装，但在下面调用了hide.hide()，没有包装。由于这已经是一个jquery对象，因此无需将其包装在$()中。但我会保留答案，因为它不会影响结果。

Answer 3

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

以下是相关主题中如何使用它的示例。 jquery toggle - switch between toggle functions?

禁用复选框时显示/隐藏文本输入

3 个答案: