ドロップダウンに検証を追加する方法

Question

ドロップダウンに簡単な検証を追加したいと思います。たとえば、データを含む3つのドロップダウンが並んでいます。私はその時点で各ドロップダウンから1つの項目を選択することができます。ユーザーがデータを選択すると、ドロップダウンは無効にして、ユーザーが同じドロップダウン内の別のアイテムを選択するのを止めます。私は

my_condition = true; 
 
var lastSel = $("#column1 option:selected"); 
 

 
$("#column1").change(function() { 
 
    if (my_condition) { 
 
    lastSel.attr("selected", true); 
 
    } 
 
}); 
 

 
$("#column1").click(function() { 
 
    lastSel = $("#column1 option:selected"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="column1" class="text_select" name="column1" onChange=""> 
 
    <option value="">- Preferred Time -</option> 
 
    <option value="- Sold Out -">- Sold Out -</option> 
 
    <option value="2:30 - 4:00pm">2:30 - 4:00pm</option> 
 
</select> 
 
<select id="column2" class="text_select" name="column2" onChange=""> 
 
    <option value="">- Preferred Time -</option> 
 
    <option value="- Sold Out -">- Sold Out -</option> 
 
    <option value="2:30 - 4:00pm">2:30 - 4:00pm</option> 
 
</select> 
 

 
<select id="column3" class="text_select" name="column3" onChange=""> 
 
    <option value="">- Preferred Time -</option> 
 
    <option value="- Sold Out -">- Sold Out -</option> 
 
    <option value="2:30 - 4:00pm">2:30 - 4:00pm</option> 
 
</select>

Answer 1

さて、あなたは要素のブール属性の

function onChange(elem) { 
    $(elem).prop("disabled",true); 
} 

使用prop()（それらのドン」を無効にする機能を作成することができ、それを試みたが、成功しませんでしたしていますtは値を持ちます）。disabledまたはreadonlyです。

そして、各選択のonchangeハンドラとして関数を使用し、最初のパラメータとしてthisを渡します。 thisが変更される選択になります。

<select id="column1" class="text_select" name="column1" onchange="onChange(this);"> 

---

それとも、単純な、jQueryのからイベントハンドラを割り当てます。

$("#column1,#column2,#column3").on("change",function() { 
    $(this).prop("disabled",true); 
});