如果选中其他复选框，如何禁用一个复选框？

Question

我有4行的表格，每行有10个单元格。每个单元格有2个复选框。如果选中一个复选框，我想禁用其他复选框和其他方式。以下是我的例子：

＆＃13;

＆＃13;

$(".myTbl input:checkbox").click(function() {
  $(this).siblings("input:checkbox").prop("checked", false);
});

＆＃13;

table.myTbl {
  width: 100%;
}

table.myTbl td {
  text-align: center;
  padding: 1px;
  margin: 0px;
  background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTbl">
  <tr>
    <td>
      <input type="checkbox" name="frmra0m" id="frmra0m" /><b>M</b>
      <input type="checkbox" name="frmra0nr" id="frmra0nr" /><b>NR</b><br>
      <input type="number" name="frmra0" id="frmra0" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra1m" id="frmra1m" /><b>M</b>
      <input type="checkbox" name="frmra1nr" id="frmra1nr" /><b>NR</b><br>
      <input type="number" name="frmra1" id="frmra1" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra2m" id="frmra2m" /><b>M</b>
      <input type="checkbox" name="frmra2nr" id="frmra2nr" /><b>NR</b><br>
      <input type="number" name="frmra2" id="frmra2" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra3m" id="frmra3m" /><b>M</b>
      <input type="checkbox" name="frmra3nr" id="frmra3nr" /><b>NR</b><br>
      <input type="number" name="frmra3" id="frmra3" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra4m" id="frmra4m" /><b>M</b>
      <input type="checkbox" name="frmra4nr" id="frmra4nr" /><b>NR</b><br>
      <input type="number" name="frmra4" id="frmra4" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra5m" id="frmra5m" /><b>M</b>
      <input type="checkbox" name="frmra5nr" id="frmra5nr" /><b>NR</b><br>
      <input type="number" name="frmra5" id="frmra5" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra6m" id="frmra6m" /><b>M</b>
      <input type="checkbox" name="frmra6nr" id="frmra6nr" /><b>NR</b><br>
      <input type="number" name="frmra6" id="frmra6" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra7m" id="frmra7m" /><b>M</b>
      <input type="checkbox" name="frmra7nr" id="frmra7nr" /><b>NR</b><br>
      <input type="number" name="frmra7" id="frmra7" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra8m" id="frmra8m" /><b>M</b>
      <input type="checkbox" name="frmra8nr" id="frmra8nr" /><b>NR</b><br>
      <input type="number" name="frmra8" id="frmra8" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra9m" id="frmra9m" /><b>M</b>
      <input type="checkbox" name="frmra9nr" id="frmra9nr" /><b>NR</b><br>
      <input type="number" name="frmra9" id="frmra9" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra10m" id="frmra10m" /><b>M</b>
      <input type="checkbox" name="frmra10nr" id="frmra10nr" /><b>NR</b><br>
      <input type="number" name="frmra10" id="frmra10" min="0" max="120" step="5" style="width:50px" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我在考虑单选按钮，但是有一个问题。单选按钮无法取消选中。如果有人可以为此问题提供任何建议或解决方案，请告诉我。提前谢谢。

Answer 1

您可以使用jQuery siblings函数获取兄弟姐妹并取消选中它们。顺便说一下，我认为你的意思是取消选中而不是禁用？

e.g。

$(".mtTbl input:checkbox").click(function() {
  $(this).siblings("input:checkbox").prop("checked", false);
});

table.myTbl {
  width: 100%;
}

table.myTbl td {
  text-align: center;
  padding: 1px;
  margin: 0px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mtTbl">
  <tr>
    <td>
      <input type="checkbox" name="frmra0m" id="frmra0m" /><b>M</b>
      <input type="checkbox" name="frmra0nr" id="frmra0nr" /><b>NR</b><br>
      <input type="number" name="frmra0" id="frmra0" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra1m" id="frmra1m" /><b>M</b>
      <input type="checkbox" name="frmra1nr" id="frmra1nr" /><b>NR</b><br>
      <input type="number" name="frmra1" id="frmra1" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra2m" id="frmra2m" /><b>M</b>
      <input type="checkbox" name="frmra2nr" id="frmra2nr" /><b>NR</b><br>
      <input type="number" name="frmra2" id="frmra2" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra3m" id="frmra3m" /><b>M</b>
      <input type="checkbox" name="frmra3nr" id="frmra3nr" /><b>NR</b><br>
      <input type="number" name="frmra3" id="frmra3" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra4m" id="frmra4m" /><b>M</b>
      <input type="checkbox" name="frmra4nr" id="frmra4nr" /><b>NR</b><br>
      <input type="number" name="frmra4" id="frmra4" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra5m" id="frmra5m" /><b>M</b>
      <input type="checkbox" name="frmra5nr" id="frmra5nr" /><b>NR</b><br>
      <input type="number" name="frmra5" id="frmra5" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra6m" id="frmra6m" /><b>M</b>
      <input type="checkbox" name="frmra6nr" id="frmra6nr" /><b>NR</b><br>
      <input type="number" name="frmra6" id="frmra6" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra7m" id="frmra7m" /><b>M</b>
      <input type="checkbox" name="frmra7nr" id="frmra7nr" /><b>NR</b><br>
      <input type="number" name="frmra7" id="frmra7" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra8m" id="frmra8m" /><b>M</b>
      <input type="checkbox" name="frmra8nr" id="frmra8nr" /><b>NR</b><br>
      <input type="number" name="frmra8" id="frmra8" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra9m" id="frmra9m" /><b>M</b>
      <input type="checkbox" name="frmra9nr" id="frmra9nr" /><b>NR</b><br>
      <input type="number" name="frmra9" id="frmra9" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra10m" id="frmra10m" /><b>M</b>
      <input type="checkbox" name="frmra10nr" id="frmra10nr" /><b>NR</b><br>
      <input type="number" name="frmra10" id="frmra10" min="0" max="120" step="5" style="width:50px" />
    </td>
  </tr>
</table>

Answer 2

你可以使用jquery来实现这个..

＆＃13;

＆＃13;

$('.mtTbl input[type="checkbox"]').change(function() {
        if($(this).is(":checked")) {
            $(this).siblings( 'input[type="checkbox"]' ).attr('disabled',true);
        }
              
});

＆＃13;

table.myTbl {
	width: 100%;
}
table.myTbl td {
	text-align: center;
	padding: 1px;
	margin: 0px;
	background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mtTbl">
  <tr>
    <td>
      <input type="checkbox" name="frmra0m" id="frmra0m" /><b>M</b>
      <input type="checkbox" name="frmra0nr" id="frmra0nr" /><b>NR</b><br>
      <input type="number" name="frmra0" id="frmra0" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra1m" id="frmra1m" /><b>M</b>
      <input type="checkbox" name="frmra1nr" id="frmra1nr" /><b>NR</b><br>
      <input type="number" name="frmra1" id="frmra1" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra2m" id="frmra2m" /><b>M</b>
      <input type="checkbox" name="frmra2nr" id="frmra2nr" /><b>NR</b><br>
      <input type="number" name="frmra2" id="frmra2" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra3m" id="frmra3m" /><b>M</b>
      <input type="checkbox" name="frmra3nr" id="frmra3nr" /><b>NR</b><br>
      <input type="number" name="frmra3" id="frmra3" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra4m" id="frmra4m" /><b>M</b>
      <input type="checkbox" name="frmra4nr" id="frmra4nr" /><b>NR</b><br>
      <input type="number" name="frmra4" id="frmra4" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra5m" id="frmra5m" /><b>M</b>
      <input type="checkbox" name="frmra5nr" id="frmra5nr" /><b>NR</b><br>
      <input type="number" name="frmra5" id="frmra5" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra6m" id="frmra6m" /><b>M</b>
      <input type="checkbox" name="frmra6nr" id="frmra6nr" /><b>NR</b><br>
      <input type="number" name="frmra6" id="frmra6" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra7m" id="frmra7m" /><b>M</b>
      <input type="checkbox" name="frmra7nr" id="frmra7nr" /><b>NR</b><br>
      <input type="number" name="frmra7" id="frmra7" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra8m" id="frmra8m" /><b>M</b>
      <input type="checkbox" name="frmra8nr" id="frmra8nr" /><b>NR</b><br>
      <input type="number" name="frmra8" id="frmra8" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra9m" id="frmra9m" /><b>M</b>
      <input type="checkbox" name="frmra9nr" id="frmra9nr" /><b>NR</b><br>
      <input type="number" name="frmra9" id="frmra9" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra10m" id="frmra10m" /><b>M</b>
      <input type="checkbox" name="frmra10nr" id="frmra10nr" /><b>NR</b><br>
      <input type="number" name="frmra10" id="frmra10" min="0" max="120" step="5" style="width:50px" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

无论如何你应该使用单选按钮......

Answer 3

$('.mtTbl input[type="checkbox"]').change(function() {
        if($(this).is(":checked")) {
            $(this).siblings( 'input[type="checkbox"]' ).attr('disabled',true);
        }else {
            $(this).siblings( 'input[type="checkbox"]' ).attr('disabled',false);
        }
              
});

table.myTbl {
	width: 100%;
}
table.myTbl td {
	text-align: center;
	padding: 1px;
	margin: 0px;
	background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mtTbl">
  <tr>
    <td>
      <input type="checkbox" name="frmra0m" id="frmra0m" /><b>M</b>
      <input type="checkbox" name="frmra0nr" id="frmra0nr" /><b>NR</b><br>
      <input type="number" name="frmra0" id="frmra0" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra1m" id="frmra1m" /><b>M</b>
      <input type="checkbox" name="frmra1nr" id="frmra1nr" /><b>NR</b><br>
      <input type="number" name="frmra1" id="frmra1" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra2m" id="frmra2m" /><b>M</b>
      <input type="checkbox" name="frmra2nr" id="frmra2nr" /><b>NR</b><br>
      <input type="number" name="frmra2" id="frmra2" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra3m" id="frmra3m" /><b>M</b>
      <input type="checkbox" name="frmra3nr" id="frmra3nr" /><b>NR</b><br>
      <input type="number" name="frmra3" id="frmra3" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra4m" id="frmra4m" /><b>M</b>
      <input type="checkbox" name="frmra4nr" id="frmra4nr" /><b>NR</b><br>
      <input type="number" name="frmra4" id="frmra4" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra5m" id="frmra5m" /><b>M</b>
      <input type="checkbox" name="frmra5nr" id="frmra5nr" /><b>NR</b><br>
      <input type="number" name="frmra5" id="frmra5" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra6m" id="frmra6m" /><b>M</b>
      <input type="checkbox" name="frmra6nr" id="frmra6nr" /><b>NR</b><br>
      <input type="number" name="frmra6" id="frmra6" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra7m" id="frmra7m" /><b>M</b>
      <input type="checkbox" name="frmra7nr" id="frmra7nr" /><b>NR</b><br>
      <input type="number" name="frmra7" id="frmra7" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra8m" id="frmra8m" /><b>M</b>
      <input type="checkbox" name="frmra8nr" id="frmra8nr" /><b>NR</b><br>
      <input type="number" name="frmra8" id="frmra8" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra9m" id="frmra9m" /><b>M</b>
      <input type="checkbox" name="frmra9nr" id="frmra9nr" /><b>NR</b><br>
      <input type="number" name="frmra9" id="frmra9" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra10m" id="frmra10m" /><b>M</b>
      <input type="checkbox" name="frmra10nr" id="frmra10nr" /><b>NR</b><br>
      <input type="number" name="frmra10" id="frmra10" min="0" max="120" step="5" style="width:50px" />
    </td>
  </tr>
</table>

Answer 4

<script type="text/javascript">
function chk(idd) {
    idd=idd.id;
    if (idd[idd.length-1]=='m') {
        var c=idd.substr(0,idd.length-1) + 'nr';
        if (document.getElementById(c).disabled)document.getElementById(c).disabled=false;
        else document.getElementById(c).disabled=true;

    }
    else{
        var c=idd.substr(0,idd.length-2) + 'm';
        if (document.getElementById(c).disabled)document.getElementById(c).disabled=false;
        else document.getElementById(c).disabled=true;

    }
}

   <table class="mtTbl">
  <tr>
    <td>
      <input type="checkbox" name="frmra0m" id="frmra0m" onclick="chk(this)" /><b>M</b>
      <input type="checkbox" name="frmra0nr" id="frmra0nr" onclick="chk(this)" /><b>NR</b><br>
      <input type="number" name="frmra0" id="frmra0" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra1m" id="frmra1m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra1nr" id="frmra1nr" onclick="chk(this)" /><b>NR</b><br>
      <input type="number" name="frmra1" id="frmra1" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra2m" id="frmra2m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra2nr" id="frmra2nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra2" id="frmra2" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra3m" id="frmra3m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra3nr" id="frmra3nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra3" id="frmra3" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra4m" id="frmra4m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra4nr" id="frmra4nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra4" id="frmra4" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra5m" id="frmra5m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra5nr" id="frmra5nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra5" id="frmra5" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra6m" id="frmra6m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra6nr" id="frmra6nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra6" id="frmra6" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra7m" id="frmra7m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra7nr" id="frmra7nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra7" id="frmra7" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra8m" id="frmra8m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra8nr" id="frmra8nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra8" id="frmra8" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra9m" id="frmra9m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra9nr" id="frmra9nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra9" id="frmra9" min="0" max="120" step="5" style="width:50px" />
    </td>
    <td>
      <input type="checkbox" name="frmra10m" id="frmra10m" onclick="chk(this)"/><b>M</b>
      <input type="checkbox" name="frmra10nr" id="frmra10nr" onclick="chk(this)"/><b>NR</b><br>
      <input type="number" name="frmra10" id="frmra10" min="0" max="120" step="5" style="width:50px" />
    </td>
  </tr>
</table>

只需将此代码粘贴到您的网页上，并将javascript代码粘贴到同一页面上，然后在您的浏览器上运行。

如果不工作？请回复。谢谢。