Twitter引导程序链接与数据切换问题



我有一个字段,选中时会切换文本字段。在此处查看演示。

当用户选择""时,将显示一个文本字段。当用户选择"文本字段"时,将隐藏。这很好。

问题是,单击

"是",如果再次单击"是"文本框字段隐藏,则现在将显示文本字段。在用户选择"仅否"之前,它应该是可见的。

我该怎么做?我可以用jQuery轻松做到这一点,没有问题。但是由于引导程序仅使用标记来执行此操作,因此我想这样做。

这是标记 -

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

我知道的唯一方法是通过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/

最新更新