带有数据切换问题的 twitter bootstrap collpage

Question

我有一个字段，选中后会切换一个文本字段。 See demo here.

当用户选择是时，会显示一个文本字段。当用户选择 No 文本字段隐藏。这很好。

问题是，点击Yes，如果再次点击Yes 文本字段隐藏，现在会显示文本字段。在用户选择 No 之前，它应该是可见的。

我该怎么做？我可以用 jQuery 轻松做到这一点，没有问题。但是由于 bootstrap 提供了使用标记执行此操作的能力，因此我只想这样做。

这是标记 -

<div class="control-group">
        <label class="control-label" for="inputPreviousSurname">Previous Surname</label>
        <div class="controls">
            <label class="checkbox inline">
                <input type="radio" name="previousSurname" data-toggle="collapse" data-target="#demo"> Yes
            </label>
            <label class="checkbox inline">
                <input type="radio" name="previousSurname" checked data-toggle="collapse" data-target="#demo"> No
            </label>
        </div>
        <div class="controls">
            <div id="demo" class="collapse in">  <input   type="text" /></div>
        </div>
    </div>

Answer 1

我知道的唯一方法是通过 jQuery（但使用引导折叠功能）

否则引导程序只会将其视为切换。

HTML

 <div class="control-group">
    <label class="control-label" for="inputPreviousSurname">Previous Surname</label>
    <div class="controls">
        <label class="checkbox inline">
            <input id="show" type="radio" name="previousSurname"> Yes
        </label>
        <label class="checkbox inline">
            <input id="hide" type="radio" name="previousSurname" checked="" > No
        </label>
    </div>
    <div class="controls">
        <div id="demo" class="collapse">  <input   type="text" /></div>
    </div>
</div>

jQuery

$(document).ready(function(){
  $('#show').click(function(){
      $('#demo').collapse('show');
  });
  $('#hide').click(function(){
      $('#demo').collapse('hide');
  });
});

http://jsfiddle.net/2E2En/3/