<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-xs-6 col-xs-push-3" id="content"> <div class="row"> <div class="col-xs-4"> <div class="row"> <div class="col-xs-12" id="modal-new-dimension-type"> <label><strong>1. Wybierz typ:</strong></label> <div class="btn-group-vertical btn-block" role="group" data-toggle="buttons"> <label class="btn btn-default" data-range-type="INTEGER"><input type="radio" autocomplete="off" name="range_type" />Piętro</label> <label class="btn btn-info disabled" data-range-type="INTEGER"><input type="radio" autocomplete="off" name="range_type"/>Liczba pokoi</label> <label class="btn btn-default" data-range-type="FLOAT"><input type="radio" autocomplete="off" name="range_type" />Cena nominalna</label> <label class="btn btn-default" data-range-type="FLOAT"><input type="radio" autocomplete="off" name="range_type" />Cena za m²</label> <label class="btn btn-default" data-range-type="FLOAT"><input type="radio" autocomplete="off" name="range_type" />Powierzchnia</label> </div> </div> <div class="col-xs-12"> <hr> </div> <div class="col-xs-12 hidden" id="modal-new-dimension-range-type"> <label><strong>2. Agregacja:</strong></label> <div class="btn-group-vertical btn-block" data-toggle="buttons"> <label class="btn btn-default"><input type="radio" autocomplete="off" name="range_type" value="ranges"/>Przedziały</label> <label class="btn btn-default"><input type="radio" autocomplete="off" name="range_type" value="average"/>Średnia</label> </div> </div> </div> </div> <div class="col-xs-8"> <div class="row hidden" id="modal-new-dimension-ranges"> <div class="col-xs-12"> <label><strong>3. Zdefiniuj przedziały:</strong></label> </div> <div class="col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group form-group-sm" style="margin-bottom: 0!important;"> <label for="range0_begin" class="col-xs-3 control-label">1 zakres</label> <div class="col-xs-4 no-padding-right"> <div class="input-group"> <span class="input-group-addon"><strong>≥</strong></span> <input class="form-control text-right" id="range0_begin" name="range0_begin" value="0" type="text" /> </div> </div> <div class="col-xs-5 "> <div class="input-group"> <span class="input-group-addon"><strong><</strong></span> <input class="form-control text-right" id="range0_end" name="range0_end" value="30" type="text" /> </div> </div> </div> </form> </div> <div class="panel-footer"> <code>inf</code> - by wprowadzić <span class="bigger-120">∞</span> </div> </div> </div> </div> </div> </div> </div>

.no-padding-right { padding-right:0; }

jQuery(function ($) { var $that = $('#content'); $that.find('#modal-new-dimension-type label.btn').on('click', function(){ var range_type = $(this).data('range-type'); var rm_classes = 'btn-default', add_classes = 'btn-info disabled'; $that .find('#modal-new-dimension-range-type').removeClass('hidden') .find('label').removeClass('active') .find('input').prop('checked', false); $that.find('#modal-new-dimension-ranges').addClass('hidden').find('input').val(''); var $buttons = $that .find('#modal-new-dimension-range-type input[name="range_type"][value="ranges"]') .prop('disabled', (range_type =='INTEGER')) .closest('label.btn'); if (range_type =='INTEGER') { $buttons.addClass(add_classes).removeClass(rm_classes); $that .find('#modal-new-dimension-range-type input[name="range_type"][value="average"]') .closest('label.btn') .trigger('click'); } else { $buttons.addClass(rm_classes).removeClass(add_classes); } }); $that.find('#modal-new-dimension-range-type label.btn').on('click', function(){ var $this = $(this), $ranges = $this.find('input[name="range_type"][value="ranges"]'); if (($this.find('input').prop('checked')) || ($ranges.length == 0)) { $that.find('#modal-new-dimension-ranges').addClass('hidden').find('input').val(''); return; } $that.find('#modal-new-dimension-ranges').removeClass('hidden').find('input').val(''); }) });