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

【问题标题】：How to disable one check box if other is checked?如果选中另一个复选框，如何禁用一个复选框？
【发布时间】：2017-10-04 23:02:31
【问题描述】：

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

$(".myTbl 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="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>

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

【问题讨论】：

  • 除了单选按钮之外，您是否尝试过其他任何方法？
  • 请也发布你的JS。
  • @KevinKloet 我在考虑下拉菜单。
  • 为什么不直接使用input type="radio" 元素呢？当您给他们相同的name 时，您将免费获得此行为

标签： javascript jquery html checkbox radio-button


【解决方案1】：

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

例如

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

【讨论】：

  • 我试过你的例子，效果很好！谢谢！
【解决方案2】：

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

$('.mtTbl input[type="checkbox"]').change(function() {
        if($(this).is(":checked")) {
            $(this).siblings( 'input[type="checkbox"]' ).attr('disabled',true);
        }
              
});
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>

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

【讨论】：

  • 如何取消选中单选按钮？
【解决方案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>

【讨论】：

  • $('.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); } });
【解决方案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 代码粘贴到同一页面上，然后在您的浏览器上运行。

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

【讨论】：

  • 请添加一些描述。对于大多数用户来说，只有代码并不好
猜你喜欢
  • 1970-01-01
  • 2019-08-13
  • 1970-01-01
  • 1970-01-01
  • 2011-08-28
  • 1970-01-01
  • 1970-01-01
  • 2021-12-24
  • 2022-11-27
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode