Instructions for deactivating a drop-down list using radio buttons in JavaScript

Question

Instructions for deactivating a drop-down list using radio buttons in JavaScript

I am working on a project where I have 3 radio buttons and 3 different combo boxes in my HTML. I want to use JavaScript to enable/disable the combo boxes based on which radio button is selected. For example, when the G1 radio button is clicked, I want only the G1 combo box to be enabled and the others to be disabled. How can I achieve this functionality with JS?

<input type="radio" name="g1" value="g1"> G1
<input type="radio" name="g2" value="g2"> G2
<input type="radio" name="g3" value="g3"> G3


<select name="g1">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>

<select name="g2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>

<select name="g3">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>

javascript combobox radio-button

Answer 1

Answer №1

Check out this jQuery code snippet that works perfectly:

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $('.checkbox').click(function(){
            $('.checkbox').not(this).removeAttr("checked");
            var id="select_"+$(this).attr('id');
            $('select').removeAttr("disabled");
            $('select').not("#"+id).attr('disabled','true');
        });
    });
</script>

HTML:

<input type="checkbox" name="group1" value="group1" class="checkbox" id="group1"> Group 1
<input type="checkbox" name="group2" value="group2" class="checkbox" id="group2"> Group 2
<input type="checkbox" name="group3" value="group3" class="checkbox" id="group3"> Group 3


    <select name="group1" id="select_group1">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    <select name="group2" id="select_group2">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    <select name="group3" id="select_group3">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

JSFIDDLE: *http://jsfiddle.net/Yzabm/*

Answer 2

Check out this jQuery code snippet that works perfectly:

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $('.checkbox').click(function(){
            $('.checkbox').not(this).removeAttr("checked");
            var id="select_"+$(this).attr('id');
            $('select').removeAttr("disabled");
            $('select').not("#"+id).attr('disabled','true');
        });
    });
</script>

HTML:

<input type="checkbox" name="group1" value="group1" class="checkbox" id="group1"> Group 1
<input type="checkbox" name="group2" value="group2" class="checkbox" id="group2"> Group 2
<input type="checkbox" name="group3" value="group3" class="checkbox" id="group3"> Group 3


    <select name="group1" id="select_group1">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    <select name="group2" id="select_group2">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    <select name="group3" id="select_group3">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

JSFIDDLE: *http://jsfiddle.net/Yzabm/*

Answer 3

Answer №2

Give this a shot:

http://jsfiddle.net/VeaVh/1/

There are more efficient selectors available, but this serves as a simple example.

Answer 4

Give this a shot:

http://jsfiddle.net/VeaVh/1/

There are more efficient selectors available, but this serves as a simple example.

Answer 5

Answer №3

Make sure to include an ID in your dropdown field so that you can interact with it using JavaScript.

By assigning an ID, you will be able to disable the dropdown field as needed.

Utilize the `onclick` event of a radio button to trigger a script that enables or disables the dropdown field.

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

Answer 6

Make sure to include an ID in your dropdown field so that you can interact with it using JavaScript.

By assigning an ID, you will be able to disable the dropdown field as needed.

Utilize the `onclick` event of a radio button to trigger a script that enables or disables the dropdown field.

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

Instructions for deactivating a drop-down list using radio buttons in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Streaming large files with Node.js can lead to significant memory consumption and potential memory errors like OOM

Tips for calculating the total of a virtual column through child associations in Sequelize

Having trouble loading the Google API using getScript. Is displaying a ReferenceError message: "Variable google not found."

Search for the location where the code is not functioning as intended

Utilizing JSON data in JavaScript to populate a datatable

Error: The variable "message" has not been defined. Please define it before displaying the welcome

The digest string for the crypto.pbkdf2Sync function is malfunctioning

What is the reason behind Meteor automatically updating a record without the need to run a "Meteor.call" function for an update?

The Node.js Express server does not provide access to certain static files

Ways to turn off emojis in froala editor

Javascript Code. Can you explain what this means: ", (err) => { }"?

Sort arrays in Javascript by their respective lengths

Having trouble with the jQuery load function not functioning properly

Create dynamic text on an HTML canvas starting from the center, displaying one character at a time while constantly adapting to the formatting

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

How to align an unordered list vertically in the center using Bootstrap?

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

Instead of returning an object, the underscore groupBy function now returns an array

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

Exploring the differences between detecting the XMLHttpRequest object in JavaScript and using the try