Javascript Jquery:防止复选框被取消选中

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

<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>

---

这仅允许在单击上一个复选框时单击，但如何防止复选框被取消选中？

您可以对复选框使用

禁用属性，并偶尔启用或禁用它们：


$（文档）。在（'click'，'input'，函数（e）{
var，该值=$（此值）；
var id=that.attr（'id'）；
变量集=$（“#集”）；
var go=$（“#go”）；
如果（id='ready'）{
如果（！set.is（':checked'）&&！go.is（':checked'））{
如果（that.is（':checked'）{
set.removeAttr（'disabled'）；
}否则{
set.attr（'disabled'，true）；
go.attr（'disabled'，true）；
}
}否则{
e、 预防默认值（）；
}
}
如果（id=='set'）{
如果（！go.is（':checked'））{
如果（that.is（':checked'）{
go.removeAttr（“禁用”）；
}否则{
go.attr（'disabled'，true）；
}
}否则{
e、 预防默认值（）；
}
}
});

准备好的
设置
去
您可以对复选框使用
disabled
属性，并偶尔启用或禁用它们：


$（文档）。在（'click'，'input'，函数（e）{
var，该值=$（此值）；
var id=that.attr（'id'）；
变量集=$（“#集”）；
var go=$（“#go”）；
如果（id='ready'）{
如果（！set.is（':checked'）&&！go.is（':checked'））{
如果（that.is（':checked'）{
set.removeAttr（'disabled'）；
}否则{
set.attr（'disabled'，true）；
go.attr（'disabled'，true）；
}
}否则{
e、 预防默认值（）；
}
}
如果（id=='set'）{
如果（！go.is（':checked'））{
如果（that.is（':checked'）{
go.removeAttr（“禁用”）；
}否则{
go.attr（'disabled'，true）；
}
}否则{
e、 预防默认值（）；
}
}
});

准备好的
设置
去
这正是您想要的


$（“#状态输入[type='checkbox']”）。在（“单击”上，函数（e）{
var复选框=$（此）；
如果（复选框为“：选中”）{
//在这里做确认的事情
e、 预防默认值（）；
返回false；
}
})
这正是你想要的


$（“#状态输入[type='checkbox']”）。在（“单击”上，函数（e）{
var复选框=$（此）；
如果（复选框为“：选中”）{
//在这里做确认的事情
e、 预防默认值（）；
返回false；
}
})；
只要改变
$（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);
}

换衣服
$（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);
}

从程序上讲，这相当简单：

在运行时禁用除第一个复选框之外的所有复选框
选中复选框后，禁用该复选框，然后启用下一个复选框
请参见下面的演示，它应按预期工作：


$（函数（）{
$（'#状态输入[type=“checkbox”]'）。每个（函数（）{
//禁用除第一个复选框以外的所有复选框
if（$（this）.closest（'tr'）.index（）！==0）{
$（this.prop（'disabled'，true）；
}
}).on（'change'，function（））{
//选中后，禁用它
$（this.prop（'disabled'，true）；
//然后启用下一个复选框
$（this）.closest（'tr'）.next（'tr'）.find（'input[type=“checkbox”]）.prop（'disabled'，false）；
});
})；

准备好的
设置
去
从程序上讲，这非常简单：

在运行时禁用除第一个复选框之外的所有复选框
选中复选框后，禁用该复选框，然后启用下一个复选框
请参见下面的演示，它应按预期工作：


$（函数（）{
$（'#状态输入[type=“checkbox”]'）。每个（函数（）{
//禁用除第一个复选框以外的所有复选框
if（$（this）.closest（'tr'）.index（）！==0）{
$（this.prop（'disabled'，true）；
}
}).on（'change'，function（））{
//选中后，禁用它
$（this.prop（'disabled'，true）；
//然后启用下一个复选框
$（this）.closest（'tr'）.next（'tr'）.find（'input[type=“checkbox”]）.prop（'disabled'，false）；
});
})；

准备好的
设置
去
以下是一个不禁用复选框的示例：

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

 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 --;
     }
 });

以下是未禁用复选框的示例：

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

 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 --;
     }
 });

谢谢，但有了这个，我仍然可以按时间顺序松开。再次更新我的答案！谢谢，但有了这个，我仍然可以按时间顺序松开。再次更新我的答案！我仍然可以按相反的顺序松开。@user892134你想从上到下松开吗？它适用于从下到上？我仍然可以按相反的顺序松开。@user892134您想从上到下取消单击？它适用于从下到上？很好。我有一个类似的解决方案，除了使用CSS
指针事件
：。
禁用
似乎是一个更好的解决方案。实际上，指针事件可能更可取，这取决于OP使用复选框的上下文，因为当复选框被禁用时（或任何输入，真的）它们的值在提交表单时不会发送：）很好。我有一个类似的解决方案，除了使用CSS
指针事件
：。
禁用
似乎是一个更好的解决方案。实际上，指针事件可能更可取，这取决于OP使用复选框的上下文，因为当复选框被禁用时（或任何输入，实际上）提交表单时不会发送其值：）