Way to lock a select element after a radio button is selected in jQuery

Question

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

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

Brian Dillingham · Accepted Answer · 2014-12-17T19:33:16.323

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.com/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>

Actually using `.prop('disabled', true)` would be sufficient. These attributes (e.g. `readonly`, `disabled`) are binary, therefore do not require any value ;) — Terry, Dec 17 '14 at 19:22

benomatis · Answer 2 · 2014-12-17T19:28:32.337

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

Madbreaks · Answer 3 · 2014-12-17T19:24:48.150

0

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

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

<script src="https://ajax.googleapis.com/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.

edited Dec 17 '14 at 19:24

answered Dec 17 '14 at 19:18

Madbreaks

19,094
7
58
72

1

this will work, but will also prevent the select's value from being submitted - disabled elements are not submitted with the rest of a form. – Marc B Dec 17 '14 at 19:18
OP is trying to prevent use of a `select` – charlietfl Dec 17 '14 at 19:21
@MarcB Well, the select isn't part of the form anyway. It's not clear to me what the end intent is there. – Madbreaks Dec 17 '14 at 19:22

score 0 · Answer 4 · edited May 23 '17 at 12:12

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.com/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>

Way to lock a select element after a radio button is selected in jQuery

4 Answers4