Небольшая помощь в создании функции, которая отключает некоторые элементы формы

Question

У меня есть несколько DIVs на странице.

Внутри этих DIV у меня есть несколько form-elements, таких как inputs и selects.

У меня также есть two radio buttons.

Я хочу, чтобы при каждом нажатии радио nr2 отключалось ВСЕ ДРУГИЕ ЭЛЕМЕНТЫ внутри активного DIV.

Вот один из моих DIV и его содержание:

<div id="test">

<select name="cars_mile_to" id="cars_mile_to" style="width: 130px; margin-bottom: 5px;">

                <option id="Miltal Till" value="1000000" class="nav_option_main" selected>-- Miltal Till --</option>
                <option id="500" value="500">500</option>
                <option id="1000" value="1000">1 000</option>
                <option id="1500" value="1500">1 500</option>
                <option id="2000" value="2000">2 000</option>
                <option id="2500" value="2500">2 500</option>
                <option id="3000" value="3000">3 000</option>
                <option id="3500" value="3500">3 500</option>
                <option id="4000" value="4000">4 000</option>
                <option id="4500" value="4500">4 500</option>
                <option id="5000" value="5000">5 000</option>
                <option id="5500" value="5500">5 500</option>
                <option id="6000" value="6000">6 000</option>
                <option id="6500" value="6500">6 500</option>
                <option id="7000" value="7000">7 000</option>
                <option id="7500" value="7500">7 500</option>
                <option id="8000" value="8000">8 000</option>
                <option id="8500" value="8500">8 500</option>
                <option id="9000" value="9000">9 000</option>
                <option id="9500" value="9500">9 500</option>
                <option id="10000" value="10000">10 000</option>
                <option id="11000" value="11000">11 000</option>
                <option id="12000" value="12000">12 000</option>
                <option id="13000" value="13000">13 000</option>
                <option id="14000" value="14000">14 000</option>
                <option id="15000" value="15000">15 000</option>
                <option id="16000" value="16000">16 000</option>
                <option id="17000" value="17000">17 000</option>
                <option id="18000" value="18000">18 000</option>
                <option id="19000" value="19000">19 000</option>
                <option id="20000" value="20000">20 000</option>
                <option id="22500" value="22500">22 500</option>
                <option id="25000" value="25000">25 000</option>
                <option id="30000" value="30000">30 000</option>
                <option id="35000" value="35000">35 000</option>
                <option id="40000" value="40000">40 000</option>
                <option id="45000" value="45000">45 000</option>
                <option id="50000" value="50000">50 000</option>
                <option id="1000000" value="900000">Över 50 000</option>

              </select>

              <select name="cars_fuel" id="cars_fuel" style="width: 160px; margin-bottom: 5px;">

                <option id="Drivmedel" value="Drivmedel" class="nav_option_main" selected>-- Drivmedel --</option>
                <option id="Bensin" value="Bensin">Bensin</option>
                <option id="Diesel" value="Diesel">Diesel</option>
                <option id="Miljöbränsle" value="Miljöbränsle">Miljöbränsle</option>
                <option id="EL" value="EL">EL</option>

              </select>

              <br />

              <input type="radio" name="cars_action" id="cars_action_sell" value="Säljes" checked>
                     <font face="Arial, Helvetica, sans-serif" style="font-size:14px; font-weight:bold;">Säljes</font>
              <input type="radio" name="cars_action" id="cars_action_buy" value="Köpes">
                     <font face="Arial, Helvetica, sans-serif" style="font-size:14px; font-weight:bold;">Köpes</font> 

      </div>

Как я уже упоминал выше, я хочу, чтобы при выборе радиостанции с id=cars_action_buy отключались все другие возможные элементы внутри текущего DIV. Возможно, добавив функцию js?

Спасибо

Answer 1

Если вы используете библиотеку типа jQuery, это сработает.

Вставьте это над своим кодом и попробуйте в браузере.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
<script type="text/javascript">
  $(function()
  {
    $('#cars_action_buy').click( function( event )
    {
      var $elem = $(this);
      if ( $elem[0].checked )
      {
        console.log( $elem.parent().find( 'input, select' ) );
        $elem.parent().find( 'input, select' ).not( $elem ).attr( 'disabled', 'disabled' );
      }
    });  
  })
</script>

Answer 2

В JavaScript вы можете просто использовать атрибут disabled = "true". Итак, в обработчике onselect вы можете сделать что-то вроде:

document.getElementById('cars_mile_to').disabled = true;

для каждого из элементов, которые вы хотите отключить. Если они всегда находятся в одном и том же div, то вы можете просто зацикливать элементы, игнорируя группу радио.

Answer 3

Используя jQuery, что-то подобное может работать

$("#cars_action_buy").change(function() {
    var div = $(this).
    if ($("#cars_action_buy").val() == "Köpes") {
        $("#test select,#test input:not(#cars_action_buy)").attr("disabled", "disabled");
    }
});

Answer 4

Я бы добавил атрибут onselect к вашей радиокнопке, чтобы вызвать некоторую функцию javascript. В функции javascript отключите идентификаторы, которые вы хотите отключить.

<input type="radio" name="cars_action" id="cars_action_buy" value="Köpes" onselect="Disable()">

<script type="text/javascript">
function Disable()
{
  var myVar = Document.GetElementByID('<element ID name>');
  myVar.Disabled = true;
  //do this for each you wish to disable
}
</script>