layui Table 单条复选框禁止选中设置

layui的Table组件中，如果你想禁止单条数据的复选框被用户选择，可以通过配置项`check`来进行设置。具体步骤如下：

1. 在初始化Table的时候，设置`check`属性为`{checkbox: {disabled: true}}`。这里的`disabled: true`表示所有复选框都是禁用状态。

layui.use('table', function () {
    var table = layui.table;
    table.init({
        elem: '#tableId', // 表格元素ID
        data: yourData, // 数据源
        methods: {}, // 如果有自定义方法可以在此处添加
        check: { // 配置检查选项
            checkbox: { disabled: true } // 禁止单选或多选
        }
    });
});

在这个配置中，表头的复选框仍然会存在，但它不会对行数据的复选框起作用，用户无法勾选某一行。

相关问题

layui Table 复选框禁止选中设置

layui表格中的复选框默认是可以被用户选择的，如果你想禁止用户对某一列或多列的复选框进行选中操作，你可以通过HTML属性和layui的配置来实现。以下是一个简单的例子：

<table lay-filter="yourTableFilter" lay-data="yourData" lay-cell="{field:'select',checkbox:true,readonly:true}">
    <thead>
        <tr>
            <!-- 其他表头 -->
            <th>是否禁选</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行，每一项都有一个名为'select'的字段 -->
    </tbody>
</table>

<script>
// 表格配置
layui.use('laytable', function(){
    var table = layui.laytable;
    // 初始化并阻止表单提交，这里可以修改为只允许管理员操作等
    table.init('yourTable').setOption({
        elem: 'yourTable',
        checkbox: {
            disabled: true // 禁止所有复选框的选择
        },
        cellSelect: false // 阻止单元格内的内容被选中
    });
});
</script>

在这个例子中，`readonly:true` 设置了复选框不可编辑，`checkbox: {disabled: true}` 则直接禁止了复选框的选中功能。`cellSelect: false` 可以防止点击表格单元格的内容时意外触发选中。

layui table行点击tr_layui的点击table行选中复选框

要实现行点击选中复选框的效果，可以通过以下步骤来实现：

1. 在表头中添加一个全选的复选框，并为其设置一个ID。

2. 在每一行的第一列中添加一个复选框，并为其设置一个class，例如“check-box”。

3. 给表格绑定一个点击事件，在点击事件中判断点击的元素是否为复选框或者全选的复选框，如果是，则执行对应的操作。

4. 当点击某一行时，获取该行的复选框元素，并设置其选中状态为true。

下面是一个示例代码：

<table class="layui-table" id="myTable">
  <thead>
    <tr>
      <th><input type="checkbox" name="" lay-skin="primary" id="checkAll"></th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr_layui">
      <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr class="tr_layui">
      <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
  </tbody>
</table>

<script>
  // 全选复选框的点击事件
  $('#checkAll').on('click', function() {
    if ($(this).is(':checked')) {
      $('.check-box').prop('checked', true);
    } else {
      $('.check-box').prop('checked', false);
    }
  });
  
  // 行点击事件
  $('.tr_layui').on('click', function() {
    // 判断是否为复选框或者全选复选框
    if ($(event.target).is(':checkbox')) {
      return;
    }
    // 获取该行的复选框元素
    var checkBox = $(this).find('.check-box');
    // 判断该复选框是否已选中
    if (checkBox.is(':checked')) {
      checkBox.prop('checked', false);
    } else {
      checkBox.prop('checked', true);
    }
  });
</script>

在这段代码中，我们首先给表头添加一个ID为“checkAll”的全选复选框，然后在每一行的第一列中添加class为“check-box”的复选框。接着，我们给全选复选框和每行绑定点击事件，在事件中判断点击的元素是否为复选框或者全选复选框，然后执行对应的操作。当点击某一行时，我们获取该行的复选框元素，并设置其选中状态。这样，就可以实现行点击选中复选框的效果了。