Creating a rule to disable some options in a form

Question

I have this form: http://leagueipsum.blogspot.com.br/2015/05/blog-post.html

<table>
 <tbody>
<tr><td><div class="current_tier">
<select id="ct">
            <option value="b">Bronze</option>
            <option value="s">Prata</option>
            <option value="g">Ouro</option>
            <option value="p">Platina</option>
            <option value="d">Diamante</option>
</select>
<select id="cd">
            <option>5</option>
            <option>4</option>
            <option>3</option>
            <option>2</option>
            <option>1</option>
</select>
        </div>
</td>

<td><div class="desired_tier">
<select id="dt">
            <option value="b">Bronze</option>
            <option value="s">Prata</option>
            <option value="g">Ouro</option>
            <option value="p">Platina</option>
            <option value="d">Diamante</option>
</select>
      <select id="dd">
            <option>5</option>
            <option>4</option>
            <option>3</option>
            <option>2</option>
            <option>1</option>
</select>
        </div>
</td></tr>
</tbody></table>

And I want to add two more options:

            <option value="b">Bronze</option>
            <option value="s">Prata</option>
            <option value="g">Ouro</option>
            <option value="p">Platina</option>
            <option value="d">Diamante</option>
            <option value="m">Mestre</option>
            <option value="c">Desafiante</option>

But that two new options does not have the 1-5 option, how can I disable the numbers options, every time that one of them were selected?

it is not hard, google it, there is no need for SO here ;), use jquery — Vitaliy Terziev, May 03 '15 at 00:01
Why are you recommending jQuery? What does it offer that specifically helps, that isn't available in plain JavaScript? — David Thomas, May 03 '15 at 00:33

score 0 · Answer 1 · edited May 23 '17 at 11:50

Using Javascript:

You can do it like this:

function validate() {
    var selectTags = document.getElementById("current_tier");
    var selectedValue = selectTags.options[selectTags.selectedIndex].value;
    if (selectedValue == "m" && "c") {
         document.getElementById("dd").disabled=true;
    }
}

Check out this link for more information:

How to check if an item is selected from an HTML drop down list?

Using jQuery:

You can also use jQuery to do it. First, make sure you have included jQuery libraries in your head tags. Just copy the following code in your head tags:

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

Then you should give those two options an id. For example:

<option value="m" id="special">Mestre</option>
<option value="c" id="special">Desafiante</option>

Then just add the following code in your head tags:

$(document).ready(function(){
     if ($("#special").is(":checked")) {
         $('#dd').prop('disabled', 'disabled');
     }
     else {
         $('#pizza_kind').prop('disabled', false);
     }
})

Was the question tagged with jQuery? No. Does jQuery offer anything not available in plain JavaScript? No. So: *why the jQuery answer*? — David Thomas, May 03 '15 at 00:29
@DavidThomas You're Right! I just added a way to do it with JavaScript. — Arshia, May 03 '15 at 00:43

elti musa · Answer 2 · 2015-05-03T00:42:56.280

with javascript

<html>
    <head>
    <title></title>
    </head>
    <body>
    <table>
    <tbody>
    <tr><td><div class="current_tier">
    <select id="ct" onChange="y();">
        <option value="b">Bronze</option>
        <option value="s">Prata</option>
        <option value="g">Ouro</option>
        <option value="p">Platina</option>
        <option value="d">Diamante</option>
        <option value="m">Mestre</option>
        <option value="c">Desafiante</option>
    </select>
    <select id="cd">
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
    </select>
    </div>
    </td>

    <td><div class="desired_tier">
    <select id="dt" onChange="x();">
        <option value="b">Bronze</option>
        <option value="s">Prata</option>
        <option value="g">Ouro</option>
        <option value="p">Platina</option>
        <option value="d">Diamante</option>
        <option value="m">Mestre</option>
        <option value="c">Desafiante</option>
    </select>
    <select id="dd">
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
    </select>
    </div>
    </td></tr>
    </tbody></table>
    <script>
    var ct = document.getElementById("ct");
    var dt = document.getElementById("dt");


    function y() {
    if (ct.value == "m" || ct.value == "c" ) {
    document.getElementById('cd').style.display="none";
    } else {
    document.getElementById('cd').style.display="inline-block";
    }
    }

    function x() {
    if (dt.value == "m" || dt.value == "c" ) {
    document.getElementById('dd').style.display="none";
    } else {
    document.getElementById('dd').style.display="inline-block";
    }
    }

    </script>   
    </body>

    </html>

So we first add a on change at our select tag so when we select one of options it will fire a function. Inside of function we want to check if we have select those two, then if we have select them hide numbers options.

Creating a rule to disable some options in a form

2 Answers2