jquery - 禁用表单域时隐藏图标

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="disabled"。在控件 div 下，我在输入字段上也有禁用标签，还有一个包含我正在谈论的图标的 i 元素。

我试过了

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

但它不起作用。另外，如果我将 CSS 中的显示属性从内联 block 更改为无，即使该字段被禁用，即使没有显示图标也不会显示。

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

Answer 1

试试这个:

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