入力フィールドのオプションをjsonに既に存在する場合は非アクティブにします

Question

私が作成しているページでは、予定を立てるオプションがあります。このオプションは、入力フィールドで、オプションとして「予約可能時間」が表示されます。

コードは次のようになります。

<div class="form-group"> 
     <label class="control-label col-sm-2" for="text">Hour:</label> 
     <div class="col-sm-2"> 
      <select class="form-control" id="time"> 
      <option value="Time" class="">Time</option> 
         <option value="10am" class="">10:00-10:30</option> 
         <option value="1030am" class="">10:30-11:00</option> 
         <option value="11am" class="">11:00-11:30</option> 
         <option value="1130am" class="">11:30-12:00</option> 
         <option value="12pm" class="">12:00-12:30</option> 
         <option value="1230pm" class="">12:30-13:00</option> 
         <option value="1pm" class="">13:00-13:30</option> 
         <option value="130pm" class="">13:30-14:00</option> 
         <option value="2pm" class="">14:00-14:30</option> 
         <option value="230pm" class="">14:30-15:00</option> 
         <option value="3pm" class="">15:00-15:30</option> 
         <option value="330pm" class="">15:30-16:00</option> 
         <option value="4pm" class="">16:00-16:30</option> 
         <option value="430pm" class="">16:30-17:00</option> 
         </select> 
     </div> 
     </div> 

は、私はまた、すでに予約した時間との配列を返すのAJAX要求を持っています。

私は何をしたいのですか（どのように考えているか）：私が持っているリストでは、すべての予約時間を非アクティブにすることです。

ヒントをいただければ幸いです。

Answer 1

<option>を繰り返し実行し、その値が配列に存在する場合は無効に設定します。それ以外の場合は、有効に戻します。

const youArray = ["10am", "11am", "4pm"]; 
 

 
$('#time option').toArray().map($).forEach(function(optionEl) { 
 
    if (youArray.indexOf(optionEl.val()) >= 0) { 
 
    optionEl.prop('disabled', true); 
 
    } else { 
 
    optionEl.prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="text">Hour:</label> 
 
    <div class="col-sm-2"> 
 
    <select class="form-control" id="time"> 
 
     <option value="Time" class="">Time</option> 
 
     <option value="10am" class="">10:00-10:30</option> 
 
     <option value="1030am" class="">10:30-11:00</option> 
 
     <option value="11am" class="">11:00-11:30</option> 
 
     <option value="1130am" class="">11:30-12:00</option> 
 
     <option value="12pm" class="">12:00-12:30</option> 
 
     <option value="1230pm" class="">12:30-13:00</option> 
 
     <option value="1pm" class="">13:00-13:30</option> 
 
     <option value="130pm" class="">13:30-14:00</option> 
 
     <option value="2pm" class="">14:00-14:30</option> 
 
     <option value="230pm" class="">14:30-15:00</option> 
 
     <option value="3pm" class="">15:00-15:30</option> 
 
     <option value="330pm" class="">15:30-16:00</option> 
 
     <option value="4pm" class="">16:00-16:30</option> 
 
     <option value="430pm" class="">16:30-17:00</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 2

まず、ご予約時間のオプションのためのセレクタを作成します。それを使用してアイテムを無効にします。

// contains the list of booked hours 
resp = ['Time','10am', '330pm']; 

function update(){ 
    var sel = ''; 

    for(var i=0; i < resp.length; i++){ 
    sel += ",#time [value='" + resp[i] + "'] "; 
    } 
    sel = sel.substr(1); 
    $("#time option").removeAttr('disabled'); 
    $(sel).attr('disabled',true); 
} 

update(); 

ここで作業コードを探す：https://jsbin.com/geyiyubogi

Answer 3

ちょうど配列の値によってフィルタリング：

var optionsSet = ["10am", "11am", "4pm"]; 
$('#time').find('option').filter(function() { 
return optionsSet.indexOf($(this).val()) >= 0; 
}).prop('disabled',true); 

ただ以前に無効ことに注意して、彼らが変更した場合に有効にする必要があります...

これにより、アレイ内の現在のものだけが無効になります。

$('#time').find('option').prop('disabled',false).filter(function() { 
return optionsSet.indexOf($(this).val()) >= 0; 
}).prop('disabled',true);