Нельзя использовать один элемент <label> для маркировки двух отдельных входов.Я бы предложил связать метки с радиокнопками, поскольку радиокнопка является такой маленькой целью щелчка, а метка расширяет эту цель.
Выберите один из радиомодулей, который будет выбран по умолчанию, возможно, «$ Off»,По умолчанию отключите другое текстовое поле:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
Затем используйте jQuery, чтобы сделать что-то вроде этого:
$(function (){
$("#discount-dollars, #discount-percent").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest(".control-group").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
По сути, он прослушивает события click на обеих переключателях.Когда вы щелкаете одно радио, оно активирует связанное с ним текстовое поле (т. Е. Текстовое поле с именем класса CSS, соответствующим значению радиокнопки) и отключает другое текстовое поле.Таким образом, вы не можете вводить текст в любое текстовое поле, если не установлен соответствующий переключатель.