1

チェックするとテキストフィールドを切り替えるフィールドがあります。 ここでデモを参照してください。

ユーザーが [はい] を選択すると、テキスト フィールドが表示されます。ユーザーがテキスト フィールドを非表示にしないを選択した場合。これで問題ありません。

問題は、[はい] をクリックすると、もう一度[はい]テキスト フィールドが非表示になるとテキスト フィールドが表示されることです。ユーザーが [いいえ]のみを選択するまで表示されます。

どうやってやるの ？これは 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>
4

1 に答える 1

2

私が知っている唯一の方法は、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/

于 2013-10-03T14:36:12.663 に答える