CODEWITHSUNDEEP
javascriptjqueryhtml
mikeymurph77
mikeymurph77

Reputation: 802

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

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

Upvotes: 2

Views: 3039

Answers (4)

Brian Dillingham
Brian Dillingham

Reputation: 9356

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>

Upvotes: 4

benomatis
benomatis

Reputation: 5643

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

Upvotes: 2

Terry
Terry

Reputation: 66188

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>

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19549

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.

Upvotes: 0

Related Questions