jQueryの<select>オプションだけでいくつかのオプション

Question

私は例えば他のセレクタ

でのオプションのいずれかを選択しながら有効/無効にする1つのセレクタ/オプション選択方法を有効にします"unit_block"を除いてすべて無効になっていますが、オプション（AまたはB）のいずれかを選択した後は、 "unit_row_big"オプションを選択できるようになりますが、 "unit_row"ではいくつかのオプションしか有効になりません。

基本的にスプレッドシートを作成したいと思います。

私は基本的にすべてのことを考えていますが、防弾ではありません。

ブロックA（上の1つ）には、4つの大きなセル（unit_row_big）があります。ブロックBには3つのセルがあります。次に、ブロックBのいくつかの大きなセルには、12個の小さなセル（unit_row）がありますが、それらのすべてには5つの小さなセルがあります（unit_column）。たとえば、2番目から5番目の位置にLarge（unit_size）セルを作成したい場合は、次の大きなセルと衝突するので、sizeを例外として扱いたいと思います。unit_columnが1の場合のみLargeを使用できます。unit_columnが1または5の場合はMediumそして毎回小さい。

セレクタで無効化/有効化オプションの例はほとんど見つかりませんでしたが、特にこのようなものはありません。私はjavascriptでかなり悪いので、どのように作成するのか分かりませんし、少なくとも編集することができれば良い気分です。

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

あなたはjQueryのを使用することができますが、これは純粋なJavaScriptでとても簡単です。

任意のセレクタを監視してから、disabled属性をtrueにするだけです。小さなフィドルを作った。最初のドロップダウンでBが選択された場合、2番目のドロップダウンで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>