勾選一個復選框后如何禁用另一個復選框？（續）

Question

在清楚地提出我的問題之前

使用SQL Server 2008企業作為數據庫服務器檢查我的代碼

表格視圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<form method="post" name="form" id="checkForm" action="update.php">

<?php
$aksi="aksi_view.php";
switch($_GET[act]){
  // Tampil User
  default:

    echo "
    <table>
    <tr><th>Ap</th><th>Ccl</th><th>No</th><th>Budg</th><th>Dept</th><th>ItemID</th><th>Item Name</th><th>Qnty</th><th>UOM</th><th>Curr.</th><th>Rate</th><th>Unit Price</th>
    <th>Total</th><th>Total-IDR</th></tr>";

    $p      = new Paging;
    $batas  = 20;
    $posisi = $p->cariPosisi($batas);

    $counter = 1;

    $sql = "SELECT TOP 20 BudgetCategoryID,DeptAbbr, BudgetCategoryAbbr, ItemID, Status,
                            QntyDept, Qnty, CurrencyID, UnitPrice, ExchangeRateIDR, Remark,Proposal,
                            DeptApprovalRemark, M2ApprovalBy, M2ApprovalRemark, ItemName, PurchaseUOMName,
                            DecimalInQnty,(Qnty*UnitPrice) as Total, TotalIDR, CompanyDeptStock, CompanyDeptID, OutstandingNPBB
                            FROM vwBudgetApproval
                            WHERE (M2ApprovalBy IS NOT NULL OR (M2ApprovalBy IS NULL AND  Status =1)) AND 
                            CompletedInd = 1 AND DeptApprovalBy IS NOT NULL 
                            ORDER BY BudgetCategoryID, ItemID";
    $tampil = mssql_query($sql) ;

$no = $posisi+1;

while($r=mssql_fetch_array($tampil)){
  // echo"$no=2 '-'"; 
   //echo"$r[ItemID]";
      $ExchangeRateIDR = number_format($r['ExchangeRateIDR'],2,',','.');
    $unitprice = number_format($r['UnitPrice'],2,',','.'); 
    $total = number_format($r['Total'],2,',','.');
    $totalidr = number_format($r['TotalIDR'],2,',','.');


    $warnaGenap = "#66CCFF";   // warna abu-abu
    $warnaGanjil = "#FFFFFF";  // warna putih

if ($counter % 2 == 0) $warna = $warnaGenap;
else $warna = $warnaGanjil;


echo "<tr bgcolor='".$warna."'>            


 <td><input type= 'checkbox' name='approve".$no."' id='approve'   value='".$r['ItemID']."' onclick='onClickFn()'></td>
                    <td><input type= 'checkbox' name='cancel".$no."' id='cancel'   value='".$r['ItemID']."' onclick='onClickFn()'></td> 
                    <td>$no</td>
                    <td>$r[BudgetCategoryAbbr]</td>
                    <td>$r[DeptAbbr]</td>
                    <td>$r[ItemID]</td>
                    <td>$r[ItemName]</td>
                    <td>$r[Qnty]</td>
                    <td>$r[PurchaseUOMName]</td>
                    <td>$r[CurrencyID]</td>
                    <td>$r[ExchangeRateIDR]</td>
                    <td>$unitprice </td>
                    <td>$total</td>
                    <td>Rp $totalidr</td>";             
          $no++;
          $counter++;

        }
    echo "</table>";
?>

頁面顯示

現在我希望用戶在選中一個復選框時禁用另一個復選框，我希望將Java腳本用於功能。 這是我的代碼

<script type="text/javascript">
function onClickFn(){
$("approve").click(function(){
    if ($(this).prop("checked"))
    {
        $("cancel").prop("checked",false);
    }
});

$("cancel").click(function(){
    if ($(this).prop("checked"))
    {
        $("approve").prop("checked",false);
    }
})
};
</script>

但是該功能不起作用。

Answer 1

1. First of all you have given same id to all <TD>.
2. You haven't used proper id reference in your javascript.
3. Use radio button instead.

Answer 2

jQuery的：

$('table').on('click', 'input:checkbox', function() {
    $(this)
    .parents('tr')
    .find('input:checkbox:not(:checked)')
    .attr('disabled', $(this).is(':checked'));
});

http://jsfiddle.net/samliew/ERZge/

但是，您確實應該改用單選按鈕，除非您當然希望用戶能夠取消選中此復選框。

Answer 3

為什么不只使用單選按鈕？ 這似乎是一個更好的選擇。 另外，如果您希望禁用單選按鈕，則這將是jQuery的樣子： jQuery("input:radio").attr('disabled',true);

勾選一個復選框后如何禁用另一個復選框？（續）

問題描述

3 個解決方案

解決方案1
2 2013-03-04 06:56:17

解決方案2
1 已采納 2013-03-04 07:03:41

解決方案3
0 2013-03-04 06:56:05

勾選一個復選框后如何禁用另一個復選框？（續）

問題描述

3 個解決方案

解決方案1 2 2013-03-04 06:56:17

解決方案2 1 已采納 2013-03-04 07:03:41

解決方案3 0 2013-03-04 06:56:05

解決方案1
2 2013-03-04 06:56:17

解決方案2
1 已采納 2013-03-04 07:03:41

解決方案3
0 2013-03-04 06:56:05