2013-08-07 3 views
1

У меня есть проблема с простым решением, и я уверен, что я просто что-то пропустил.javascript отключить одну радио-кнопку

У меня есть 2 столбца переключателей, а при нажатии переключателя из столбца мне нужно отключить соответствующий переключатель из противоположного столбца, поэтому его нельзя выбрать. Затем, если выбрана другая кнопка, снова включите предыдущую кнопку и отключите новый противоположный выбор.

Я дал всем переключателям уникальный идентификатор. first1, first2 и т. д. для колонки один, а второй1, второй2 и т. д. для столбца 2.

То, как я направлялся в сторону, не будет работать после повторного размышления об этом, и после поиска в Интернете в течение часа я не нашел способ не-jquery сделать это. Возможно ли с помощью javascript?

То, что я был до сих пор, и я знаю, что я далеко базы, но я выгорела с различными проблемами, которые я имел с этой страницы:

function disableForm(theform, theradio) { 
    //this was a start but does't save valid disabled fields 
    //it just enables everything 
    if (document.all || document.getElementById) { 
     for (i = 0; i < theform.length; i++) { 
     var formElement = theform.elements[i]; 
      if (true) { 
       formElement.disabled = false; 
      } 
     } 

    } 

    document.getElementById(theradio).onclick = function(){ 
     document.getElementById(theradio).disabled=true; 
    } 
} 
+0

Можно ли определить другие группы? first1 и second1, first2 и second2, ... так что кнопка всегда будет не выбрана, если вы выберете другую? Поэтому вам не нужно ничего отключать с помощью JavaScript. – xmashallax

+1

создайте скрипку –

+0

@xmashallax можно выбрать до 2 вариантов, но не 2 из них. Я не понимаю, как вы предлагаете. – John

ответ

3

Допустим, вы определяете радио, как

<table style="width: 100%;"> 
     <tr> 
      <td> 
       <input id="Radio1_1" type="radio" name="Radio1" onchange="process(this)"/><br /> 
       <input id="Radio1_2" type="radio" name="Radio1" onchange="process(this)"/><br /> 
       <input id="Radio1_3" type="radio" name="Radio1" onchange="process(this)"/><br /> 
       <input id="Radio1_4" type="radio" name="Radio1" onchange="process(this)"/><br /> 
       <input id="Radio1_5" type="radio" name="Radio1" onchange="process(this)"/> 
      </td> 
      <td> 
       <input id="Radio2_1" type="radio" name="Radio2" /><br /> 
       <input id="Radio2_2" type="radio" name="Radio2" /><br /> 
       <input id="Radio2_3" type="radio" name="Radio2" /><br /> 
       <input id="Radio2_4" type="radio" name="Radio2" /><br /> 
       <input id="Radio2_5" type="radio" name="Radio2" /> 

      </td> 

     </tr> 

    </table> 

Тогда цель может быть достигнута с помощью простого скрипта:

function process(rb) { 

    //clearing previos disabled 
    for (i = 0; i < document.getElementsByName("Radio2").length; i++) { 
     document.getElementsByName("Radio2")[i].disabled = ''; 
    } 
    document.getElementById(rb.id.replace('Radio1','Radio2')).disabled='disabled'; 
} 

Рабочий пример: http://jsfiddle.net/bbGDA/1/

+0

удивительный, но при выборе правой кнопки столбца он не отключает соответствующую кнопку в левой колонке. – John

+0

Используйте ту же логику, но применяйте противоположную замену, например. существует несколько опций, например, определите функцию 'process2 (rb)' и в ней просто отмените замену «Radio2» и «Radio1» и прикрепите ее к параметрам правого столбца –

+0

Да, это то, что я закончил делать. Спасибо @Yuriy! – John

Смежные вопросы