禁用表中的重复复选框不起作用

时间：2018-12-27 13:32:47

标签： jquery html

我有表格包含每行的复选框。此复选框的Value可以在其他行中重复。如果我检查任何一行并且另一行中存在相同的value，那么我想禁用除当前行以外包含相同值的另一行。

HTML和JQuery脚本如下-

$(document).ready(function() {
    $('input[type=checkbox]').change(function() {
        //debugger;
        value = $(this).attr('value');
        id = $(this).attr('id');
        checked = $(this).attr('checked');
        $('input[type=checkbox][value=' + value + ']:not(#' + id + ')')
            .attr('disabled', checked);
    });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <table class="ptlfData">
       <tbody>
          <tr>
             <th>Select Transaction ID</th>
             <th style="display:none;">Sr.No</th>
             <th>Transaction ID / UTR No.</th>
             <th>Transaction Time (HH:MM:SS:MS)</th>
             <th>Transaction Type</th>
             <th>Transaction Amount</th>
             <th style="display:none;">Dispensed Amount</th>
             <th>Terminal ID</th>
             <th>Bank Name</th>
             <th>Request Category</th>
             <th>Category Code</th>
          </tr>
          <tr class="pointer">
             <td><input type="checkbox" class="case" value="50000014"  id="50000014_1" name="case[]"></td>
             <td style="display:none;"></td>
             <td class="accountNumber">JU5532719846</td>
             <td>1313100</td>
             <td>DEBIT</td>
             <td>20</td>
             <td style="display:none;">0</td>
             <td>50000014</td>
             <td>BDPG</td>
             <td>BDPG</td>
             <td>794</td>
          </tr>
          <tr class="pointer">
             <td><input type="checkbox" class="case" value="50000231" id="50000231_2" name="case[]"></td>
             <td style="display:none;"></td>
             <td class="accountNumber">JU5532670793</td>
             <td>23592200</td>
             <td>DEBIT</td>
             <td>1282</td>
             <td style="display:none;">0</td>
             <td>50000231</td>
             <td>BDPG</td>
             <td>BDPG</td>
             <td>794</td>
          </tr>
          <tr class="pointer">
             <td><input type="checkbox" class="case" value="50000014" id="7223900_3" name="case[]"></td>
             <td style="display:none;"></td>
             <td class="accountNumber">JU5532797963</td>
             <td>7223900</td>
             <td>DEBIT</td>
             <td>400</td>
             <td style="display:none;">0</td>
             <td>50000392</td>
             <td>BDPG</td>
             <td>BDPG</td>
             <td>794</td>
          </tr>
       </tbody>
    </table>

每当我在调试模式下进行检查时，都会抛出错误checked，但未定义。

我已参考以下网址中提到的解决方案

JQuery - disable duplicate checkboxes when checked

4 个答案:

答案 0 :(得分：1)

尝试使用

checked = $(this).prop('checked');

代替

checked = $(this).attr('checked');

答案 1 :(得分：0)

下面的代码按照您的要求进行操作，并禁用具有相同.val()的复选框。还将类.disabled添加到关联的行中，以便您可以向用户更清楚地显示它。

代码说明

该复选框是否已选中？

您可以使用以下if语句，其中.is(':checked')返回布尔值true（如果已检查相关元素）。

if ( $(this).is(':checked') ) {
   ...
}

禁用其他复选框

您可以按照以下步骤收集选中的复选框的.val()：

tempVal = $(this).val();

禁用其他复选框是一个多步骤过程，整个命令如下：

$("input[type=checkbox][value=" + val + "]").not(this).attr("disabled", true).closest("tr").addClass("disabled");

每个组件的解释如下：

  • $("input[type=checkbox][value=" + val + "]")选中具有指定值的所有复选框
  • .not(this)排除当前元素（因为我们不想禁用单击的复选框）
  • .attr("disabled", true)禁用复选框
  • .closest("tr")将DOM树上移至已禁用的每个复选框的最接近的表行
  • .addClass("disabled");向该表行添加一个类，以便我们可以为用户应用一些样式

演示

$(document).on("change", "input[type=checkbox]", function() {

  // Get value from checkbox
  val = $(this).val();
  
  // Check if the checkbox has been checked
  if ( $(this).is(':checked') ) {
  
    // Disable checkboxes with that value
    // Also adds class to row to show it is disabled
    // Skip $(this) checkbox
    $("input[type=checkbox][value=" + val + "]").not(this).attr("disabled", true).closest("tr").addClass("disabled");
    
    
    
  } else {

    // Enable checkboxes is the checkbox is being unchecked
    $("input[type=checkbox][value=" + val + "]").attr("disabled", false).closest("tr").removeClass("disabled");
    
  }
  
});
tr.disabled * {
  opacity: 0.6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="ptlfData">
  <tbody>
    <tr>
      <th>Select Transaction ID</th>
      <th style="display:none;">Sr.No</th>
      <th>Transaction ID / UTR No.</th>
      <th>Transaction Time (HH:MM:SS:MS)</th>
      <th>Transaction Type</th>
      <th>Transaction Amount</th>
      <th style="display:none;">Dispensed Amount</th>
      <th>Terminal ID</th>
      <th>Bank Name</th>
      <th>Request Category</th>
      <th>Category Code</th>
    </tr>
    <tr class="pointer">
      <td><input type="checkbox" class="case" value="50000014" id="50000014_1" name="case[]">50000014</td>
      <td style="display:none;"></td>
      <td class="accountNumber">JU5532719846</td>
      <td>1313100</td>
      <td>DEBIT</td>
      <td>20</td>
      <td style="display:none;">0</td>
      <td>50000014</td>
      <td>BDPG</td>
      <td>BDPG</td>
      <td>794</td>
    </tr>
    <tr class="pointer">
      <td><input type="checkbox" class="case" value="50000231" id="50000231_2" name="case[]">50000231</td>
      <td style="display:none;"></td>
      <td class="accountNumber">JU5532670793</td>
      <td>23592200</td>
      <td>DEBIT</td>
      <td>1282</td>
      <td style="display:none;">0</td>
      <td>50000231</td>
      <td>BDPG</td>
      <td>BDPG</td>
      <td>794</td>
    </tr>
    <tr class="pointer">
      <td><input type="checkbox" class="case" value="50000014" id="7223900_3" name="case[]">50000014</td>
      <td style="display:none;"></td>
      <td class="accountNumber">JU5532797963</td>
      <td>7223900</td>
      <td>DEBIT</td>
      <td>400</td>
      <td style="display:none;">0</td>
      <td>50000392</td>
      <td>BDPG</td>
      <td>BDPG</td>
      <td>794</td>
    </tr>
  </tbody>
</table>

答案 2 :(得分：0)

只需将checked = $(this).attr('checked');更改为checked = $(this).is( ':checked' );

答案 3 :(得分：0)

可能您正在寻找。遍历具有相同值的复选框，但停用那些没有相同ID的复选框。

 $(document).ready(function() {
    $('input[type=checkbox]').change(function() {
        value = $(this).attr('value');
        id = $(this).attr('id');
        // disables any checkbox with the same value, but without the same id 
        $(`input[value="${value}"]`).each(function(i,v){ 
            if(v.id !== id){
                v.checked = false;
            }
         });
    });
});
相关问题
最新问题