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

单击复选框

#securityCl

时，此代码段成功显示文本输入。但是，为了避免在用户切换到另一个单选按钮或再次单击

#securityCl

复选框来完全禁用输入时提交包含不必要文本的表单，我想隐藏并清除

#typeOther

文本输入

HTML:

试试这个：

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

---

听起来您可以使用切换功能在显示和隐藏之间切换

下面是一个在相关线程中如何使用它的示例

这是我最新的小提琴

值得注意的事项：

• 将事件处理移出嵌套
• 触发活动项事件，使其强制处于初始状态（编辑时很有用，如果已选择“其他”，则将重新初始化扩展的“其他”复选框）
• 将处理程序更改为处理组中任何单选按钮上的任何单击，以便它知道如何正确隐藏/显示另一个框

以下是重要的代码：

$(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对象，所以无需将其包装在

$（）

中。但我将保留答案，因为它不会影响结果。

那么问题出在哪里？它没有做你期望它做的事？还有，为什么要嵌套处理程序？每次单击secureCl时，都会在securityType上注册另一个事件处理程序。您希望看到什么

$（“#typeOther”）。单击（函数（）…

为您做什么？@EliGassert我正在嵌套我的处理程序，因为我仍在学习JS的操作和不操作。来自j08691的答案正是我想要的。有没有更好的方法来处理这个问题？明白了。好吧，这不是您想要做的：）如果您在处理程序中放置一个警报并单击securityCl几次，你会明白的！它将为每次单击添加一个警报，您将看到它将一次又一次地添加相同的处理程序，这是一种浪费。请参阅我的答案以获得一个更清晰的版本。我不想感到痛苦，但我个人认为使用通用函数别名作为变量名是非常麻烦的！：什么都没有！

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

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