JSFiddle - React, Tailwind, and code Playground

by Ryan McQuen

HTML

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

JavaScript

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


});