选择特定表行时禁用按钮

时间:2014-03-19 20:23:20

标签: javascript php jquery

我想禁用特定的行按钮而不是所有按钮。我尝试使用id,但它只隐藏了第一行按钮。任何帮助都会很好。

PHP:

$rowID=1;
while($row = oci_fetch_array($query))
{
  echo '<tr>

  <td>
      <a href="#" rel='.$rowID.' id="buttonq" class="button green ValueDisplay">
            <div class="icon" style="margin-left: 5px; margin-top: 5px;">
                   <span class="ico-edit"></span>
            </div>
      </a>
  </td>

  </tr>';
  $rowID++;
}

JS:

<script>
$('.ValueDisplay').click(function()
{
   var getid = this.rel;

   $('#buttonq').css('visibility', 'hidden');
   //document.getElementById('buttonq'+getid+'').style.visibility="hidden";
});
</script>

2 个答案:

答案 0 :(得分:2)

除非您需要其他内容id,否则您只需根据点击的链接切换特定行的状态。

http://jsfiddle.net/XJVbD/

<强> PHP

while($row = oci_fetch_array($query))
{
  echo '<tr>
    <td>
      <a href="#" class="button green ValueDisplay">
        <span class="icon" style="display: block; margin-left: 5px; margin-top: 5px;">
          <span class="ico-edit"></span>
        </span>
      </a>
    </td>    
  </tr>';
}

<强>的jQuery

$('.ValueDisplay').on('click', 'a', function(e) {
  e.preventDefault();
  $(this).closest('td').prop('disabled', 'disabled').hide();
});

我不清楚你是在隐藏还是只是禁用。如果上面的代码不是你想要的,请告诉我。

备注:

  • 用户正在点击链接元素,因此要阻止页面刷新,请在事件处理程序中使用e.preventDefault()

  • <div>锚元素中有一个<a>元素,如果这对你很重要,可能无法验证。

答案 1 :(得分:2)

根据我的评论: 您正在隐藏单击的元素,因此只需使用:

$('.ValueDisplay').click(function(ev)
{
    ev.preventDefault();
    //show all buttons
    $('.ValueDisplay').show();
    // hide this one
    $(this).hide();
});

你也可以删除id,因为它具有重复的id是无效的,它似乎没有用处:

<td>
  <a href="#" class="button green ValueDisplay">
        <div class="icon" style="margin-left: 5px; margin-top: 5px;">
               <span class="ico-edit"></span>
        </div>
  </a>
</td>