制限値を最大値に設定する

Question

製品サイズの製品数量を含むselect要素を制限します。

ユーザーがサイズ（たとえば16）を選択すると、$(orderqty)の最大数が1に設定されます。オプションの残りは無効にすることができます。

私のHTMLコード：

<select name="qty" id="orderqty"> 
    <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> 
</select> 

<ul class="productinfoul"> 
    <li> 
    <div class="size " title="Size : 16" id="17.99" data-stock="1">16</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 18" id="17.99" data-stock="1">18</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 20" id="17.99" data-stock="1">20</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 22/24" id="17.99" data-stock="2">22/24</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 26/28" id="17.99" data-stock="2">26/28</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 30/32" id="17.99" data-stock="2">30/32</div> 
    </li> 
    <li> 
    <div class="size " title="Size : 34/36" id="17.99" data-stock="1">34/36</div> 
    </li> 
</ul> 

のjQueryコード：

$('.size').click(function(e) { 
    maxval = $(this).attr('data-stock'); 
    var selected = $('#orderqty option:selected').text() 
    if(maxval < selected){ 
     alert("You can only select maximum of "+maxval+" for this product"); 
     $("#orderqty").val(maxval).change(); 
    } 
}); 

しかし、こののみ動作次に、ユーザが第1の量の製品サイズを選択した場合。

ありがとうございました。

Answer 1

これはあなたが探しているものである必要があります。

あなたは無関係なオプションを無効にすることができdata-stock

$('.size').click(function(e) { 
 
    var maxval = $(this).attr('data-stock'); 
 
    $("#orderqty option").each(function(i, x) { 
 
    if (parseInt($(x).text()) > maxval) { 
 
     $(x).prop("disabled", true) 
 
    } else { 
 
     $(x).prop("disabled", false) 
 
    } 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="qty" id="orderqty"> 
 
<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> 
 
</select> 
 

 
<ul class="productinfoul"> 
 
    <li> 
 
    <div class="size " title="Size : 16" id="17.99" data-stock="1">16</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 18" id="17.99" data-stock="1">18</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 20" id="17.99" data-stock="1">20</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 22/24" id="17.99" data-stock="2">22/24</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 26/28" id="17.99" data-stock="2">26/28</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 30/32" id="17.99" data-stock="2">30/32</div> 
 
    </li> 
 
    <li> 
 
    <div class="size " title="Size : 34/36" id="17.99" data-stock="1">34/36</div> 
 
    </li> 
 

 
</ul>

Answer 2

からその同等または値よりも小さい場合のみのどちらに応じて、ユーザーがselectから番号を選択することができますサイズのオプションがクリックされました。最初に、ユーザーが最初にsize要素の1つをクリックする必要があるように、すべてのオプションを無効にすることができます。

$('.size').click(function(e) { 
 
var maxval = parseInt($(this).attr('data-stock')); 
 
$("#orderqty option").each(function(){ 
 
    var curValue = parseInt($(this).text()); 
 
    if(curValue <= maxval){ 
 
    $(this).prop("disabled", false); 
 
    }else{ 
 
    $(this).prop("disabled", true); 
 
    } 
 
});//each() 
 
}); 
 

 

 
//Initially disable all options 
 
$("#orderqty option").each(function(){ 
 
    $(this).prop("disabled", true); 
 
});//each()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="qty" id="orderqty"> 
 
<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> 
 
</select> 
 

 
<ul class="productinfoul"> 
 
<li><div class="size " title="Size : 16" id="17.99" data-stock="1">16</div></li> 
 
<li><div class="size " title="Size : 18" id="17.99" data-stock="1">18</div></li> 
 
<li><div class="size " title="Size : 20" id="17.99" data-stock="1">20</div></li> 
 
<li><div class="size " title="Size : 22/24" id="17.99" data-stock="2">22/24</div></li> 
 
<li><div class="size " title="Size : 26/28" id="17.99" data-stock="2">26/28</div></li> 
 
<li><div class="size " title="Size : 30/32" id="17.99" data-stock="2">30/32</div></li> 
 
<li><div class="size " title="Size : 34/36" id="17.99" data-stock="5">34/36</div></li> 
 

 
      </ul>