如何在单选控件的表单标签内获取可点击按钮答案

【问题标题】：How to get clickable button inside form label in radio control如何在单选控件的表单标签内获取可点击按钮
【发布时间】：2023-03-17 13:51:01
【问题描述】：

我想要一个单选组，其中每个标签在右侧包含一个可点击的图标，它不会选择元素，只执行一个点击事件。单击标签内的任何其他区域应选择单选组中的该项目。但点击图标应该只执行该代码。

问题在于<label> 承担了对其区域内任何点击的所有控制。我已经调整了 x-indexes，如果不选择单选组中的项目，根本无法点击图标。我正在使用 angularjs 和 ionic 框架。

<label class="item-button-right item item-radio" >
  <input type="radio" name="radio-group">
  <div class="item-content disable-pointer-events" >
    <span>My Radio Button</span>
    <button ng-click="doSomething(); $event.stopPropagation();" class="button button-icon radio-button">
      <i class="button-icon icon ion-ios-information-outline"></i><i class="icon ion-ios-arrow-right"></i>
    </button>
  </div>
  <i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
</label>

【问题讨论】：

标签： html angularjs ionic-framework ionic

【解决方案1】：

如果我理解你的正确，那么你可以在 ng-repeat 中添加一个 ng-click 选项。然后只需传入作用域名称并用它做一些事情。
示例 html示例

 <h5>Your group</h5>
            <ul class="list-group" ng-repeat="obj in objs">
                <li class="list-group-item">
                    {{obj.name}}
                    <button class="btn btn-primary btn-xs" data-title="View" data-toggle="modal" data-target="#view" ng-click="Dosomething(obj.name)"><span class="glyphicon glyphicon-pencil"></span></button>
                    <input type="radio" ng-model="color.name" ng-value="specialValue">
                    <input type="radio" ng-model="color.name" value="red">
                    color = {{color.name | json}}
                </li>
            </ul>

脚本示例

app.controller('ExampleController', ['$scope', function($scope) {
  $scope.color = {
    name: 'blue'
  };
  $scope.specialValue = {
    "id": "12345",
    "value": "green"
  };
  $scope.Dosomething = function(name) {
    alert("MyName");
};

}]);

【讨论】：

如果我理解错了，或者需要更多帮助，请告诉我
标签的一个重要功能是使整行（全宽）可单击以选择收音机。
只要在你想用的地方添加 ng-click
ng-click 不起作用。点击标签内的任何内容都会触发单选，这是不需要的。
@lilbiscuit ng-click 如果它在自己的标记中，它将起作用。

【解决方案2】：

您也可以通过将按钮/图标html移出标签来采取css定位路线，然后使用css将其置于您需要的位置。有点像这个小提琴：https://jsfiddle.net/nwx9kzw1/

这是完成工作的一些示例 css：

.special-icon-class{
  position:relative;
  z-index: 999;
  top:1px;
  left:25px;
}

【讨论】：