使用javascript启用和禁用复选框[重复]答案

【问题标题】：Enable and disable check boxes using javascript [duplicate]使用javascript启用和禁用复选框[重复]
【发布时间】：2016-09-25 07:00:57
【问题描述】：

Table with two checkboxes

我有一个数据表，其中包含两个复选框，称为制造缺陷和报废项目。当我检查制造缺陷时，我需要禁用报废项目，反之亦然。请帮我找到答案。 Bellow 是我的代码部分，我用来创建复选框

row += '<td class="Item_Rejected1">' + '<input type="checkbox" name="active" value="checked" class="form-control input-sm" onchange="isActive()">' + '</td>';
row += '<td class="Item_Rejected2">' + '<input type="checkbox" name="active" value="checked" class="form-control input-sm" onchange="isActive()">' + '</td>';

【问题讨论】：

这里，禁用意味着什么？您需要取消选中其他一项或禁用？
很抱歉没有禁用这个词。未选中。
您应该为此使用单选按钮。
仅供参考，接受的答案是所有答案中最差的一个，它混合了 jQuery 选择器和本机选择器以及许多不必要的 DOM 查询和重复代码...。

标签： javascript jquery html checkbox asp.net-mvc-5

【解决方案1】：

(1) 检测点击任何复选框
(2) 取消选中所有复选框
(3) 勾选被点击的复选框

/*  javascript/jQuery  */
$('input[type=checkbox]').click(function(){
    $('input[type=checkbox]').prop('checked',false);
    $(this).prop('checked',true);
});

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="Item_Rejected1">
      IR1 <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
    <td class="Item_Rejected2">
      IR2 <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
  </tr>
</table>

【讨论】：

谢谢！！！它正在工作:)

【解决方案2】：

使用.not(SELECTOR) 排除当前元素

$('input[type="checkbox"]').change(function() {
  if (this.checked)
    $('input[type="checkbox"]').not(this).prop('checked', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="Item_Rejected1">
      IR1
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
    <td class="Item_Rejected2">
      IR2
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
  </tr>
</table>

【讨论】：

谢谢！！它正在工作:)

【解决方案3】：

还有一个答案，

   

 $('input[type="checkbox"]').click(function() {
      if (this.checked)
        $('input[type="checkbox"]').attr('checked',false);
         $(this).prop('checked',true);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="Item_Rejected1">
      IR1
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
    <td class="Item_Rejected2">
      IR2
      <input type="checkbox" name="active" value="checked" class="form-control input-sm">
    </td>
  </tr>
</table>

【讨论】：

【解决方案4】：

这是 Rasika 要求的实际答案。不要改变问题。这是那个答案。我得到了输出。

[这里是输出]https://jsfiddle.net/Abhilash1994/btmfuwsg/

Manufacturer: <input type="checkbox" id="myCheck"> 
Scrap: <input type="checkbox" id="myCheck1">
    <script>
      $(document).ready(function() {
        $('#myCheck').change(function() {
            if ($(this).prop('checked')) {
                document.getElementById("myCheck1").disabled=true;
            }
            else {
               document.getElementById("myCheck1").disabled=false;
            }
        });
        $('#myCheck1').change(function() {
            if ($(this).prop('checked')) {
                document.getElementById("myCheck").disabled=true;
            }
            else {
               document.getElementById("myCheck").disabled=false;
            }
        });
    });
    </script>

【讨论】：

我可以知道投反对票的原因吗？这将是答案。