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

未选择:

选择后:

在以前这种效果只能使用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");
但是删除后,在提交的时候,依然会提示错误。

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