Связывание радиокнопок и ввода текста

Вы не можете использовать один элемент <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">
      &#36; 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">
      &#37; 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, совпадающим со значением переключателя) и отключает другое текстовое поле. Таким образом, вы не сможете ввести текст ни в одно из текстовых полей, пока не будет установлен соответствующий переключатель.

используйте радиокнопку изображения с двумя состояниями: выбрано и не выбрано, когда вы нажимаете радиоизображение, просто установите фокус на текстовое поле и переключитесь на выбранное вами радиоизображение, и наоборот.

Вы не можете сосредоточиться на двух элементах, это будет либо текстовое поле ввода, либо переключатель. Но вы должны использовать JavaScript или jQuery, когда вы нажимаете переключатель, чтобы сфокусироваться на поле ниже, или когда вы вводите значение в поле ниже, чтобы проверить переключатель выше.

Это может помочь вам, если вы хотите использовать jquery: http://api.jquery.com/val/ и http://api.jquery.com/focus/

Это ОЧЕНЬ грубый набросок, чтобы помочь вам, но вы можете сделать что-то вроде этого (при соблюдении определенного соглашения об именах):

<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> &nbsp; <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> &nbsp; <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>

<script>
    function changeMe(inField) {
        var fieldId = inField.id;
        var type = fieldId.substring(0, 4);

        if(type == 'text') {
            var name = fieldId.substring(4);
            var radioButton = document.getElementById("radio" + name);
            radioButton.checked = true;
        }else {
            var name = fieldId.substring(5);
            var textField = document.getElementById("text" + name);
            textField.focus();
        }
    }
</script>

jQuery — это то, что вам нужно. Предполагая, что ваши элементы имели следующие идентификаторы:

• $ радиокнопка: деньги-радио
• Текстовое поле $: деньги-текст
• % радиокнопка: процент-радио
• % текстовое поле: процентный текст

... код может выглядеть примерно так. Это позаботится об отключении текстовых полей и правильной фокусировке ввода.

<form>
    <table>
        <tr>
            <td>
                <input type="radio" id="money-radio" name="unit" value="money" />
                <label for="money-radio">$ Off</label>
            </td>
            <td>
                <input type="radio" id="percent-radio" name="unit" value="percent" />
                <label for="percent-radio">% Off</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="money-text" name="money-off" />
            </td>
            <td>
                <input type="text" id="percent-text" name="percent-off" />
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    $(function() {
        $('#percent-radio, #money-radio').change(function() {
            if ($('#percent-radio').val() == true) {
                $('#percent-text').removeAttr('disabled').focus();
            } else {
                $('#percent-text').attr('disabled', 'disabled');
            }

            if ($('#money-radio').val() == true) {
                $('#money-text').removeAttr('disabled').focus();
            } else {
                $('#money-text').attr('disabled', 'disabled');
            }
        }).change();
    });
</script>