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

Question

当单击复选框#securityCl时，此代码段成功显示文本输入#typeOther。但是，如果用户切换到另一个单选按钮，或者通过再次单击#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

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 2

试试这个：

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 3

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

下面是在相关的线程中如何使用它的示例。 jquery toggle - switch between toggle functions?