jQuery <select> option enable just some options

Question

How do I choose which one selector/option I want to disable/enable while selecting one of options at other selectors

For example:

I would like to have them all disabled except for "unit_block", after I choose one of the option (A or B) "unit_row_big" will enable allowing me to chose any of the options, but "unit_row" will enable only some of the options.

Basically here is spreadsheet how I would like to create it.

I have everythink working basically, but it is not bulletproof.

How you can see in block A (upper one) there are 4 bigger cells (unit_row_big) wile block B have 3 of them. Then some bigger cells in block B have 12 smaller cells (unit_row) but all of them have 5 smaller cells wide (unit_column). For example if I would like to create Large (unit_size) cell on 2-5th position it would collide with next big cell so I would like to have exception that size Large can be used only when unit_column is 1 Medium if unit_column is 1 or 5 and Small every time.

I found few examples of disabling/enabling option in selectors but none this particular. Since I'm pretty bad with javascripts I have no idea how to create one, and I feel good if I can at least edit one.

Spreadsheet

JSFiddle demo

    <div class="form-group">
    <select class="selectpicker" name="unit_block" id="unit_block" >
    <option>A</option>
    <option>B</option>
    </select>
    </div>

    <div class="form-group">
    <select class="selectpicker" name="unit_row_big" id="unit_row_big" disable>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    </select>
    </div>

    <div class="form-group">
    <select class="selectpicker" name="unit_row" id="unit_row">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    </select>
    </div>

    <div class="form-group">
    <select class="selectpicker" name="unit_column" id="unit_column">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
    </div>


    <div class="form-group">
    <select class="selectpicker" name="unit_size" id="unit_size">                
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
    </select>
    </div>

Answer 1

You could use jQuery but this is pretty easy in pure JavaScript.

You just need to monitor whatever selectors you want and then make the disabled attribute true based on those choices. I made a small fiddle where if B is selected in the first dropdown, 2 is disabled on the second dropdown. You should be able to easily expand on that.

https://jsfiddle.net/ryanpcmcquen/6no3jyzb/

 document.addEventListener('DOMContentLoaded', function () { 'use strict'; var unitBlock = document.querySelector('select#unit_block'); var unitRowBig = document.querySelector('select#unit_row_big'); unitBlock.addEventListener('change', function () { if (unitBlock.value === 'B') { // [1] is equal to option '2' unitRowBig[1].disabled = true; } else { unitRowBig[1].disabled = false; } }); });

 <form class="form-signin" method="post" id="register-form"> <h2 class="form-signin-heading">Unit specification</h2> <hr /> <div id="error"> <!-- error will be showen here ! --> </div> <div class="form-group"> <input type="text" class="form-control" name="unit_name" id="unit_name" /> </div> <div class="form-group"> <input type="text" class="form-control" name="unit_group" id="unit_group" /> </div> <div class="form-group"> <select class="selectpicker" name="unit_block" id="unit_block"> <option>A</option> <option>B</option> </select> </div> <div class="form-group"> <select class="selectpicker" name="unit_row_big" id="unit_row_big"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <select class="selectpicker" name="unit_row" id="unit_row"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> </div> <div class="form-group"> <select class="selectpicker" name="unit_column" id="unit_column"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <select class="selectpicker" name="unit_size" id="unit_size"> <option>Small</option> <option>Medium</option> <option>Large</option> </select> </div> <hr /> <div class="form-group text-center"> <button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">Insert</button> </div> </form>