禁用表单域时隐藏图标

Question

我有一个表单，其中我有一个日期选择器，其中有一个图标，显示在输入字段上单击时的日历。

我有一个案例，我的字段被禁用，单击表单字段或图标时没有显示日历，但我还想在div具有“禁用”属性时隐藏图标。

HTML：

<div class="control-group no-clear" ydatepicker ng-model="data.date"
                 ng-disabled="(data.id && data.isRecurrent()) || saving">
                <label for="date">Date</label>

                <div class="controls">
                    <input type="text" id="date" ng-model="data.date" required/>
                </div>
                <div class="picker" ui-date="Config.dateOptions" ui-date-format="DD, MM d yy" ng-model="data.date"></div>
            </div>

CSS：

.control-group.date {
  height: 44px;

 .controls {
    position: relative;

  input {
    cursor: pointer;
  }

  i {
    color: $color20;
    font-size: 11px;
    display: inline-block;
    @include transform(rotate(180deg));
    background-color: #fff;
    padding: 1px;
    pointer-events: none !important;

    position: absolute;
    top: 7px;
    right: 7px;
  }

  .icon-x {
    color: $color30;
    pointer-events: inherit !important;
  }
}

What I have now

另外，有关详细信息，在浏览器中检查元素时，“control-group”获取“date”类，并且还禁用=“disabled”。在控制div下，我在输入字段上也有禁用标记，以及包含我正在谈论的图标的i元素。

我试过了

.control-group.date:disabled .controls i {
   display:none;
}

但它不起作用。此外，如果我将CSS中的display属性从inline-block更改为none，即使没有禁用该字段，也不会显示该图标。

我希望在禁用该字段时不显示我的图标。

Answer 1

试试这个：

.control-group.date[disabled="disabled"] .controls i {
   display:none;
}