如何禁用使用本地存储的站点中的按钮?

时间:2014-04-03 06:44:23

标签: javascript jquery html local-storage

这是我的html

<div class="col-md-9">
  <table class="table table-striped table-bordered table-condensed">
    <thead>
      <tr style="background-color: white">
        <th> <i class="fa fa-male"></i> Name </th>
        <th><i class="fa fa-bars"></i> Particular</th>
        <th><i class="fa fa-envelope-o"></i>Unit</th>
        <th><i class="fa fa-map-marker"></i>Quantity</th>
        <th><i class="fa fa-phone"></i>From</th>
        <th><i class="fa fa-phone"></i>Date</th>
        <th><i class="fa fa-phone"></i>TAKE actions</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>COMB</td>
        <td>fasionable comb</td>
        <td>SVP</td>
        <td>3</td>
        <td>Bindibhatt1</td>
        <td>2014-03-22 18:15:34 UTC
        </td><td>
          <form action="/requisitions/2" class="button_to" method="get"><div><input class="pos" data-confirm="Are you sure?" type="submit" value = "po" ></div></form>

        </td>
      </tr>
      <tr>
      </tr>
    </tbody>
  </table>

</div>

和我的jquery

$(window).load(function(){

    $(".pos").click(function(e){
        debugger;
        localStorage.setItem("visited" + $(this).closest("tr").index(), true);
        $(this).css("color", "red"); // visited
    });

    for(var i = 0, len = $(".pos").length; i < len; i++){

        if(localStorage.getItem("visited" + i)){

            $(".pos:eq(" + i + ")").css("color", "white"); // visited

        }else
        {
            $(".pos:eq(" + i + ")").css("color", "black"); // not visited
        }
    }
});

我希望点击的按钮为disabled,而html应为generated po

1 个答案:

答案 0 :(得分:1)

您可以使用以下选项禁用该按钮:

for(var i = 0, len = $("tr.pos").length; i < len; i++) {

    if(localStorage.getItem("visited" + i)) {
        $("tr.pos").eq(i).css("color", "white").prop('disabled', true).val('generated'); // visited
    } else {
        $("tr.pos").eq(i).css("color", "black"); // not visited
    }
}

您需要更具体的选择器tr.pos,因为您的DOM中也有input.pos(您没有在您的问题中显示)。