1

多くの解決策を探しましたが、ブートストラップ フォームの正確な解決策を得ることができませんでした。

以下のコードがあります。入力フィールドのすぐ隣に (+) を置き、新しいフィールドを (-) で追加して削除したい。

フォームグループを使用せずにブートストラップで行われたすべての例。しかし、私の場合はフォームグループです。どうすればそれができますか？

ブートストラップ 3.3.6 バージョンを使用しています。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control"/>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

4

1 に答える 1

4 

var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
    minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';

$('.add-field').click(function() {
  var temp = $(template).insertBefore('.help-block');
  temp.append(minusButton);
});

$('.fields').on('click', '.delete-field', function(){
  $(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4 fields">
        <div class="input-group">
          <input type="text" class="form-control"/>
          <span class="btn input-group-addon add-field">(+)</span>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

于 2016-02-08T09:02:44.067 に答える