我有一个字段,选中时会切换文本字段。在此处查看演示。
当用户选择"是"时,将显示一个文本字段。当用户选择"无文本字段"时,将隐藏。这很好。
问题是,单击"是",如果再次单击"是"文本框字段隐藏,则现在将显示文本字段。在用户选择"仅否"之前,它应该是可见的。
我该怎么做?我可以用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/