Little help on making a function which disables some form elements

I have several DIVs on a page.

Inside these DIVs I have several form-elements such as inputs and selects.

I also have two radio buttons.

I want whenever radio nr2 is clicked, to disable ALL OTHER ELEMENTS inside the active DIV.

Here is one of my DIVs and its content:

<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 50开发者_开发知识库0</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>

I want as I mention above, that whenever the radio with the id=cars_action_buy is selected, to disable all other possible elements inside the current DIV. Perhaps by adding a js function?

Thanks

In javascript you can simply use the disabled="true" attribute. So, in the onselect handler you can do something like:

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

for each of the elements you want to disable. If they are always in the same div, then you can simply loop over the elements, ignoring the radio group.

I'd add an onselect attribute to your radio button to call some javascript function. Within the javascript function, disable the IDs that you wish to disable.

<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>

Using jQuery, something like this could work

$("#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");
    }
});

If you're up for using a library like jQuery, this this will work.

Paste this above your code and try it out in your browser.

<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>