JavaScriptで同じIDの複数のボタンをチェックする

Question

私は人が予約できるウェブサイトを構築しようとしています。データベースを使って時代を収集し、PHPを表示しています。利用できないものも含めて、5日以内に常時表示されます。それらはボタンとして表示され、すべて同じIDを共有します。私は最後のステップで立ち往生し、利用不可能な時間でボタンを無効にしました。

これらのボタンの唯一の違いは背景色です（使用できない場合は灰色、使用可能な場合は緑色）。私は、条件内のボックスの背景色を確認し、次に灰色1つは無効になり、緑のものはフォームになります。ただし、最初のボタンの色のみをチェックし、すべてのボタンは同じ結果を返します。

マイページには常に50個のボタンが表示されるので、最後に自動減算を使用してwhileループを使用できると思ったが、次のボタンを確認する方法がわからない同じボタンを何度も何度もチェックするだけです。ここでは右の色とボタンを表示するには、PHPコードの一部は、（私はいくつかの無関係な部分を取り出しました）です：

while($row = $results->fetch_assoc()){ 
    $color = "##8fd6a5"; 
    if (!empty($row['unavailable'])){ 
     $color = "##9b9393"; 
    } 

    $time= new DateTime($row['time']); 

    if ($time->format('H') == '08'){ 
     echo '<button id="myBtn" onload="disablebuttons()" class="buttonstyle" 
       style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>'; 
    } 
} 

これは完全に動作しますが、すべてのボタンにid =「myBtnです」disablebuttonsを持っているので、 （）は、それだけ、このコードに続いて、最初のボタンを見て、実行します。

function disablebuttons() { 
    var amountButton = 50; 
    while (amountButton > 0){ 
     var buttondisable = document.getElementById("myBtn"); 

     if (buttondisable.style.backgroundColor == "rgb(155, 147, 147)"){ 
      document.getElementById("myBtn").disabled = true;  
      amountButton--; 
     } 
    } 
} 

私は、whileループの最後で変数を削除し、「VaRのbuttondisable =のdocument.getElementByIdを（」配置しようとしましたmyBtn "）;"しかし、これはうまくいかなかった。

Answer 1

各ボタンに異なるIDを使用する必要があるため、IDは一意である必要があります。それらをグループ化するには、同じクラスをavailableとすれば、利用可能であればunavailableとなります。このような何か：

while($row = $results->fetch_assoc()) 
{ 
    $color = "##8fd6a5"; 
    $class= 'available' 
    if (!empty($row['unavailable'])) 
    { 
     $color = "##9b9393"; 
     $class= 'unavailable' 
    } 
    $time= new DateTime($row['time']); 
    if ($time->format('H') == '08') 
    { 
     echo '<button id="myBtn" onload="disablebuttons()" class="buttonstyle '.$class.'" style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>'; 
    } 
} 

今、あなただけのように特定のボタンをターゲットにすることができjavascriptの上：id属性はそう、同じ文書内で一意である必要があります

var buttondAvailable = document.getElementByClassName("available"); 

OR

var buttondUnavailable = document.getElementByClassName("unavailable"); 

Answer 2

のように、 idの代わりに共通のクラスを使用してください getElementsByClassName()を使用して、すべてのボタンを通して、あなたのJSコードのループで10

if ($time->format('H') == '08'){ 
    echo '<button onload="disablebuttons()" class="buttonstyle myBtn" 
      style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>'; 
} 

その後：

var buttons = document.getElementsByClassName('myBtn'); 

for(var i = 0; i < buttons.length; i++) 
{ 
    //Your logic here 

    var button = buttons[i]; 

    if (button.style.backgroundColor == "rgb(155, 147, 147)") 
    { 
     button.disabled = true;  
    } 
} 

・ホープ、このことができます。

Answer 3

親要素を取得して子要素をループすると、各要素とその背景を確認して無効にすることができます。

$('#mydiv').children('button').each(function() { 
     // "this" is the current element in the loop 
     if($(this).css("background-color") == "rgb(155, 147, 147)"){ 
      $(this).disabled = true; 
     } 
    });