選擇特定表格行時禁用按鈕

Question

我想禁用特定的行按鈕，而不是所有按鈕。 我嘗試使用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>

Answer 1

除非您需要別的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() 。

• 您在<a>錨元素內有一個<div>元素，如果這對您來說很重要，則可能無法驗證。

Answer 2

根據我的評論：您正在隱藏clicked元素，因此只需使用：

$('.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>