如何让按钮变成灰色

有多个按钮
<button onClick="" style="width:50;height:22;" id="next">按钮</button>
<button onClick="" style="width:50;height:22;" id="next">按钮</button>
<button onClick="" style="width:50;height:22;" id="next">按钮</button>
<button onClick="" style="width:50;height:22;" id="next">按钮</button>
<button onClick="" style="width:50;height:22;" id="next">按钮</button>
<button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
<button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
<button onClick="" style="width:50;height:22;" id="bbb">按钮</button>如果可以让 所有ID = next的按钮都变成灰色

解决方案 »

  1.   

    首先你的写法有问题，id="next"的id是唯一的，不能相同，可以改成name，变灰设置它的background属性不就可以吗
      

  2.   

    我指的是 disabled="disabled"  不是灰颜色
      

  3.   

    <html>
    <head>
    <script>
    onload = function() {
    var buttons = document.getElementsByTagName("button");
    var i = buttons.length;
    while(i--) {
    var button = buttons[i];
    if (button.id == "next") {
    button.disabled = true;
    }
    }
    }
    </script>
    </head>
    <body>
    <button onClick="" style="width:50;height:22;" id="next">按钮</button>
    <button onClick="" style="width:50;height:22;" id="next">按钮</button>
    <button onClick="" style="width:50;height:22;" id="next">按钮</button>
    <button onClick="" style="width:50;height:22;" id="next">按钮</button>
    <button onClick="" style="width:50;height:22;" id="next">按钮</button>
    <button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
    <button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
    <button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
    </body>
    </html>不建议使用重复的id，建议使用class来区分，例如：
    <html>
    <head>
    <script>
    onload = function() {
    var buttons = document.getElementsByTagName("button");
    var i = buttons.length;
    while(i--) {
    var button = buttons[i];
    if (/\bnext\b/.test(button.className)) {
    button.disabled = true;
    }
    }
    }
    </script>
    </head>
    <body>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="bbb">按钮</button>
    <button onClick="" style="width:50;height:22;" class="bbb">按钮</button>
    <button onClick="" style="width:50;height:22;" class="bbb">按钮</button>
    </body>
    </html>
      

  4.   

    disabled 这种变灰好像就不能点了
      

  5.   

    #next { 
    FILTER: gray 
    } 
      

  6.   

    看看jq的写法：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script type="text/javascript">
      <!--
    $(function(){
    $(".next").attr("disabled","disabled")
    })
      //-->
      </script>
     </head> <body>
      <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" class="next">按钮</button>
    <button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
    <button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
    <button onClick="" style="width:50;height:22;" id="bbb">按钮</button>
     </body>