单击表格行时如何避免选中复选框

Posted 2023-05-09

【中文标题】单击表格行时如何避免选中复选框

【英文标题】：How to avoid checkbox being selected when clicking on table row

【发布时间】：2017-12-03 09:09:40

【问题描述】：

我有一个表格，其中一列是一个复选框，我需要根据特定逻辑激活或不激活。

我的问题是，即使复选框被禁用，当我点击复选框之外的表格行时，复选框也会被选中。

解决此问题的最佳方法是什么？ 是否也停用行表？

 <table st-safe-src="sampleOverview.dataSet" st-table="sampleOverview.displayed" class="table table-striped">
    <tr ng-repeat="sample in sampleOverview.displayed track by $index" ng-click="sample.selected = !sample.selected" ng-class="success: sample.selected, warning : sample.deviceId == null || sample.methodId == null " ng-disabled="sample.deviceId == null || sample.methodId == null">
                <td class="hidden-xs hidden-sm">sample.lab</td>
                <td class="hidden-xs hidden-sm">sample.subLab</td>
                <td>sample.deviceLimsCode</td>
                <td>sample.methodLimsCode</td>
                <td>sample.sampleCode</td>
                <td class="text-center hidden-xs hidden-sm">
                    <input type="checkbox" ng-model="sample.selected" ng-click="sampleOverview.selectSample($event, sample)" ng-disabled="sample.deviceId == null || sample.methodId == null">
                </td>
            </tr>
        </tbody>
    </table>

【参考方案1】：

您在行上使用ng-click。去掉它。您在表格行上的ng-click 正在触发复选框模型的值发生变化。您可以更改复选框的 ng-model 的名称或删除 ng-click on table 或更改后者中使用的变量。

 <table st-safe-src="sampleOverview.dataSet" st-table="sampleOverview.displayed" class="table table-striped">
    <tr ng-repeat="sample in sampleOverview.displayed track by $index" ng-class="success: sample.selected, warning : sample.deviceId == null || sample.methodId == null " ng-disabled="sample.deviceId == null || sample.methodId == null">
                <td class="hidden-xs hidden-sm">sample.lab</td>
                <td class="hidden-xs hidden-sm">sample.subLab</td>
                <td>sample.deviceLimsCode</td>
                <td>sample.methodLimsCode</td>
                <td>sample.sampleCode</td>
                <td class="text-center hidden-xs hidden-sm">
                    <input type="checkbox" ng-model="sample.selected" ng-click="sampleOverview.selectSample($event, sample)" ng-disabled="sample.deviceId == null || sample.methodId == null">
                </td>
            </tr>
        </tbody>
    </table> 

或者，如果您想根据 ng-click 在行中添加一个类，请更改变量名称，如下所示

<table st-safe-src="sampleOverview.dataSet" st-table="sampleOverview.displayed" class="table table-striped">
    <tr ng-repeat="sample in sampleOverview.displayed track by $index" ng-click="selectedVal = !selectedVal" ng-class="success: selectedVal, warning : sample.deviceId == null || sample.methodId == null " ng-disabled="sample.deviceId == null || sample.methodId == null">
                <td class="hidden-xs hidden-sm">sample.lab</td>
                <td class="hidden-xs hidden-sm">sample.subLab</td>
                <td>sample.deviceLimsCode</td>
                <td>sample.methodLimsCode</td>
                <td>sample.sampleCode</td>
                <td class="text-center hidden-xs hidden-sm">
                    <input type="checkbox" ng-model="sample.selected" ng-click="sampleOverview.selectSample($event, sample)" ng-disabled="sample.deviceId == null || sample.methodId == null">
                </td>
            </tr>
        </tbody>
    </table>

并在你的控制器中初始化 selectedVal

【讨论】：

嗨 Vivz，感谢您的回复。有没有办法保持 ng-click 并阻止传播？我试过 ng-click="sample.selected = !sample.selected; $event.stopPropagation();"它没有工作

为什么需要复选框的 ng-model 与 ng-click 中的一次相同，为什么要切换它们

嗨，Vivz。感谢回复。我需要它，因为当我切换到移动视图时，我的复选框不会出现。当移动视图打开时，ng-click 使表格可选择

然后像上面的第二个解决方案一样为 ng-click 使用不同的变量

或者您可以为您的移动视图定义一个类，并且仅当它是移动视图时才启用行点击