jQuery <select>选项只启用一些选项

Question

如何在其他选择器中选择一个选项时，选择要禁用/启用的选择器/选项

例如：

除"unit_block“外，我希望所有选项都被禁用，在我选择其中一个选项(A或B)之后，"unit_row_big”将允许我选择任何选项，但"unit_row“只允许部分选项。

基本上，这是电子表格，我想如何创建它。

我每个人都认为基本工作，但这并不是防弹的。

在A组(上一组)，有4个较大的细胞(unit_row_big)，wile阻滞B有3个。B块中的一些大细胞有12个小细胞(unit_row)，但都有5个较小的细胞宽(unit_column)。例如，如果我想在第2到第5个位置创建大型(unit_size)单元，它将与下一个大单元发生碰撞，所以我希望有一个例外，即只有当unit_column为1、中等时才能使用大小较大的单元，如果unit_column为1或5，并且每次使用的时间都很小。

我在选择器中很少发现禁用/启用选项的例子，但没有发现这一点。因为我对javascripts非常糟糕，所以我不知道如何创建一个javascripts，而且如果我至少可以编辑一个，我会感觉很好。

电子表格

JSFiddle演示

​

    <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

您可以使用jQuery，但这在纯JavaScript中非常容易。

您只需要监视您想要的任何选择器，然后根据这些选择生成disabled属性true。我做了一个小小提琴，如果在第一个下拉列表中选择B，则在第二个下拉列表中禁用2。你应该能够很容易地扩展到这一点。

​

​

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>

​