jQuery<select>選項僅啟用一些選項

Question

如何在選擇其他選擇器的選項之一時選擇要禁用/啟用的選擇器/選項

例如：

我希望除了“unit_block”之外的所有選項都被禁用，在我選擇一個選項（A 或 B）之后，“unit_row_big”將允許我選擇任何選項，但“unit_row”將僅啟用其中的一些選項。

基本上這里是電子表格，我想如何創建它。

我有everythink 基本工作，但它不是防彈。

您如何在塊 A（上部）中看到有 4 個較大的單元格 (unit_row_big)，而塊 B 有 3 個。 然后塊 B 中一些較大的單元格有 12 個較小的單元格 (unit_row)，但它們都有 5 個較小的單元格寬 (unit_column)。 例如，如果我想在第 2-5 個位置創建大 (unit_size) 單元格，它會與下一個大單元格發生碰撞，所以我想有一個例外，即如果 unit_column 為 1 或 5，則僅當 unit_column 為 1 Medium 時才可以使用 size Large和小每次。

我發現在選擇器中禁用/啟用選項的例子很少，但沒有這個特別的。 由於我對 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>