Dean's blog

如下一个效果，在同一个框内有选择功能和清空功能，但希望只在选择了数据后，才出现清空功能。如下：

原始效果：

未选择：

选择后：

在以前这种效果只能使用JS来控制清空按钮，从CSS3后，可直接通过css来控制。如下：

HTML

<div class="input-group right">
    <input type="text" class="form-control ParentIdText" name="ParentIdText" required="required">
    <input type="hidden" class="form-control ParentId ParentIdValue" name="ParentId">
    <div class="input-group-btn ParentIdSelector">
        <button type="button" class="btn default editable-cancel"><i class="fa fa-times"></i></button>
        <button type="button" class="btn default selector" tabindex="-1">选择<i class="fa fa-angle-down"></i></button>
    </div>
</div>

CSS

.ParentIdText:invalid + .ParentIdValue + .input-group-btn > .editable-cancel { display: none; }

这里有两个需要注意的：

1、.ParentIdText上设置required属性；

2、通过:invalid控制清空按钮是否显示，其中:invalid用于识别验证失败的控件，见这里：http://www.runoob.com/cssref/sel-invalid.html

与:invalid相应的，还有:valid（识别验证成功的），见这里：http://www.runoob.com/cssref/sel-valid.html

问题

问题一：如果上面的上级架构为可选时，则存在问题。

由于required属性和jquery-validate.js的必填规则同名，导致字段成为必须选择，这个和原来的需求有冲突。原计划动态删除验证规则，如下：

$("#ParentIdText").rules("remove");

但是删除后，在提交的时候，依然会提示错误。

目前还不清楚如何解决这个冲突 :( ，有解决方案的欢迎提供。