I have a select drop down filled with options and then I have two radios like so...

<form>
  <select id="drop_down">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

  <div id="radios">
    <input type="radio" value="blue" id="blue" name="radio_option">Blue</input>
    <input type="radio" value="green" id="green" name="radio_option">Green</input>
  </div>
</form>  

My goal is that once a user makes a selection in the drop down and then selects a radio button... then the select drop down will (for lack of a better term) "lock up", preventing the user from going back and changing their drop down selection.

I know there's a way in jQuery to acplish this... however I have not been able to find a way...

This is my jQuery so far (it's wrong)... I am not sure what the event should be after the $('#drop_down')....

$('#radios').change(function(){
  $('#drop_down').removeProp(select);
});

I realize this may be a simple solution... I'm just not finding the right event handler in the jQuery Docs...

I have a select drop down filled with options and then I have two radios like so...

<form>
  <select id="drop_down">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

  <div id="radios">
    <input type="radio" value="blue" id="blue" name="radio_option">Blue</input>
    <input type="radio" value="green" id="green" name="radio_option">Green</input>
  </div>
</form>  

My goal is that once a user makes a selection in the drop down and then selects a radio button... then the select drop down will (for lack of a better term) "lock up", preventing the user from going back and changing their drop down selection.

I know there's a way in jQuery to acplish this... however I have not been able to find a way...

This is my jQuery so far (it's wrong)... I am not sure what the event should be after the $('#drop_down')....

$('#radios').change(function(){
  $('#drop_down').removeProp(select);
});

I realize this may be a simple solution... I'm just not finding the right event handler in the jQuery Docs...

• javascript
• jquery
• html

• 1 Note that IDs must be unique. You are recycling the blue ID for both radio buttons. – Terry Commented Dec 17, 2014 at 19:24
• Thanks @Terry for catching that. I should have been more observant when copying and pasting... – mikeymurph77 Commented Dec 17, 2014 at 19:32
• 1 Also note that the </input> tag is invalid. It is a self closing element. If you want to associate a text with an input, use the <label> element. – Terry Commented Dec 17, 2014 at 19:33

4 Answers 4

Add the attribute disabled to the select element upon the radio input changing states. And remove the disabled attribut upon form submission, allowing the input to be sent.

$('#radios input').change(function(){
  $('#drop_down').prop('disabled', true);
});

$('form').on('submit', function() {
    $(this).find('#drop_down').removeAttr('disabled');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post">

    <select id="drop_down">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
    </select>
    
    <div id="radios">
      <input type="radio" value="blue" id="blue" name="radio_option">Blue</input>
      <input type="radio" value="green" id="blue" name="radio_option">Green</input>
    </div>

    <button type="submit">Submit</button>

</form>    

You can set the button to be disabled, and update a hidden field to use the selected option, so that it also passes when you post the form.

EDIT (adding the code)

The HTML (notice the last input still within the form):

<select id="drop_down">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<form id="radios">
  <input type="radio" value="blue" id="blue" name="radio_option" class="radios">Blue</input>
  <input type="radio" value="green" id="green" name="radio_option" class="radios">Green</input>
  <input type="hidden" id="myvalue" name="radio_option" />
</form>

The jQuery code (notice I'm giving a class to the radios above, and am using that in js, so that when I do the disabling, the hidden input doesn't get disabled):

$('.radios').change(function() {
  $(this).attr('disabled', true);
  $('#myvalue').val($(this).val());
}

Set the select's attribute: disabled="disabled"

alert($('select').val());

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drop_down" disabled="disabled">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
<select>

EDIT

As MarcB points out, if you need to get the value of the disabled select element, you can do so explicitly when the form is submitted.

There is an issue with your code, where you recycled the ID blue for both radio buttons. I am not sure if this is an intended feature or a typo, but you will need to rectify it as IDs are supposed to be unique in a document. In addition, <input /> is a self closing element, so the </input> tag is invalid. Instead, use <label for="(id)">.

.removeProp() is likely not a good idea (so is .removeAttr()) because attributes or properties that have been removed cannot be added back later. Instead, use .prop('...', false) to "unset" a property. In your case, we want to disable the <select> element, and this is done by using .prop('disabled', true). However, since disabled elements will not have their values submitted, you will need to copy the final value of the select element into a hidden element, as per strategy mentioned in an answer to a related question.

$(function() {
    $('#radios').change(function(){
        $('#drop_down')
        .prop('disabled', true)
        .next()
        .val($('#drop_down').val());
        
        console.log($('#drop_down_final').val());
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drop_down">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<input type="hidden" id="drop_down_final" />
<form id="radios">
    <input type="radio" value="blue" id="blue" name="radio_option" /><label for="blue">Blue</label>
    <input type="radio" value="green" id="green" name="radio_option" /><label for="green">Green</label>
</form>