Question

我试图只允许用户按时间顺序检查复选框。

<table id="status">
    <tr><td>Ready <input type="checkbox"></td></tr>
    <tr><td>Set <input type="checkbox"></td></tr>
    <tr><td>Go <input type="checkbox"></td></tr>
</table>

不允许用户取消选中复选框，只允许点击Ready，Set，Go。为此，我只能向复选框添加事件，而不是td元素。

$("#status input[type='checkbox']").on("change",function(event) {

     if($(this).parents("tr:first").prev("tr").length==0) {
            var first_checkbox = 1;
        } else {
            var first_checkbox = 0; 
        }
        if($(this)
             .parents("tr:first")
             .prev("tr")
             .find("input[type='checkbox']")
             .is(":checked") || first_checkbox==1) {
             $(this).attr("checked",true);

        }
     }
});

如果单击上一个复选框，则只允许单击，但如何防止复选框被取消？

Answer 1

以编程方式这很简单：

在运行时

除第一个

选中复选框后，在此之后将其禁用，并启用下一个复选框

请参阅下面的演示，它应该按预期工作：

＆＃13;

$(function() {
  $('#status input[type="checkbox"]').each(function() {
    // Disable all but the first checkbox
    if ($(this).closest('tr').index() !== 0) {
      $(this).prop('disabled', true);
    }
  }).on('change', function() {
    // Once checked, disable it
    $(this).prop('disabled', true);

    // Then enable the next checkbox
    $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="status">
  <tr>
    <td>Ready
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>Set
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>Go
      <input type="checkbox" />
    </td>
  </tr>
</table>

＆＃13;

警告：如果禁用了输入元素，则在提交表单时不会发送其值。您可能希望以其他方式禁用交互，而不是依赖布尔属性disabled。 @Rich has an alternative solution of disabling pointer events，我修改了我的演示版。我添加了一些CSS样式，以便用户可以判断复选框是否可点击：

＆＃13;

$(function() {
  $('#status input[type="checkbox"]').each(function() {
    // Disable all but the first checkbox
    if ($(this).closest('tr').index() !== 0) {
      $(this).closest('tr').addClass('disabled');
    }
  }).on('change', function() {
    // Once checked, disable it
    $(this).closest('tr').addClass('disabled checked');

    // Then enable the next checkbox
    $(this).closest('tr').next('tr').removeClass('disabled');
  });
});

＆＃13;

tr {
  background-color: #BEEB9F;
}
tr.disabled {
  background-color: #FFFF9D;
}
tr.disabled.checked {
  background-color: #97C4A6;
}
tr.disabled input {
  pointer-events: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="status">
  <tr>
    <td>Ready
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>Set
      <input type="checkbox" />
    </td>
  </tr>
  <tr>
    <td>Go
      <input type="checkbox" />
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您可以使用disabled属性作为复选框，偶尔启用或禁用它们：

＆＃13;

$(document).on('click', 'input', function(e) {
  var that = $(this);
  var id = that.attr('id');
  var set = $('#set');
  var go = $('#go');
  if (id == 'ready') {        
    if (!set.is(':checked') && !go.is(':checked')) {
      if (that.is(':checked')) { 
        set.removeAttr('disabled'); 
      } else {
        set.attr('disabled', true); 
        go.attr('disabled', true);
      }
    } else {
      e.preventDefault();
    }
  }
  if (id == 'set') {
    if (!go.is(':checked')) {
      if (that.is(':checked')) { 
         go.removeAttr('disabled'); 
      } else {
         go.attr('disabled', true);
      }
    } else {
      e.preventDefault();
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="status">
<tr><td>Ready <input id="ready" type="checkbox"></td></tr>
<tr><td>Set <input id="set" type="checkbox" disabled></td></tr>
<tr><td>Go <input id="go" type="checkbox" disabled></td></tr>
</table>

＆＃13;

Answer 3

这应该完全符合您的要求。

＆＃13;

$("#status input[type='checkbox']").on("click", function (e) {
    var checkbox = $(this);
    if (checkbox.is(":checked") {
        // do the confirmation thing here
        e.preventDefault();
        return false;
    }
});

＆＃13;

Answer 4

改变 $(this).attr("checked",true);到$(this).prop('checked', true) 并添加以下内容：

if( first_checkbox != 1 && !$(this).parents('tr:first').prev('tr').find('input[type="checkbox"]').is(":checked")) {
   $(this).prop('checked', false);
}

Answer 5

以下是一个示例，但未禁用复选框：https://jsfiddle.net/t338vu33/

必须取消选中或按时间顺序检查复选框：

 var current = 0;

 $("#status input[type='checkbox']").on("change", function(event) {
      var selectedIndex = $('input:checkbox').index( $(this) );

     if ($(this).is(":checked")) {        
         if(selectedIndex != current)
             $(this).prop('checked', false);
         else
             current ++;
     }    
     else{      
         if(selectedIndex != current-1)
             $(this).prop('checked', true);
         else
             current --;
     }
 });

Jquery：阻止取消选中复选框

5 个答案: