尝试提交“按钮复选框”的集合
trying to submit a collection of "buttons-checkbox"
我爱上了twitter-bootstrap,我喜欢我可以用于我的应用程序的简单风格。
我想使用元素按钮复选框而不是常规复选框。
<div class="control-group">
<div class="controls">
<div class="btn-group btn-group-vertical" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-info btn-small" value="1" id="LanguagesAvailable_0__Code" name="LanguagesAvailable[0].Code">
Value 1
</button>
<button type="button" class="btn btn-info btn-small" value="2" id="LanguagesAvailable_1__Code" name="LanguagesAvailable[1].Code">
Value 2
</button>
<button type="button" class="btn btn-info btn-small" value="3" id="LanguagesAvailable_2__Code" name="LanguagesAvailable[2].Code">
Value 3
</button>
<button type="button" class="btn btn-info btn-small" value="4" id="LanguagesAvailable_3__Code" name="LanguagesAvailable[3].Code">
Value 4
</button>
</div>
</div>
</div>
可悲的是,我可以发布这些类型的元素。
是否有任何解决方法可以使用 twitter-bootstrap 设置我的复选框样式并将这些元素发布到表单中?
我在这里准备了一个小提琴。
您可以使用此解决方案:
http://jsfiddle.net/charettes/SauLj/
j查询:
jQuery(document).ready(function($){
$('#radio_3').prop('disabled', true);
$('#radio_2').prop('checked', true);
});
.CSS:
.btn-group > input {
display: none;
}
.btn-group input:first-child + .btn {
/* This is an actual copy/paste of the .btn-group .btn:first-child style */
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}
input:checked + label.btn {
/* This is an actual copy/paste of the .btn:active style */
background-color: #E6E6E6;
background-image: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.5);
outline: 0 none;
}
input[disabled] + label.btn {
/* This is an actual copy/paste of the .btn:disabled style */
background-color: #E6E6E6;
background-image: none;
box-shadow: none;
cursor: default;
opacity: 0.65;
}
.HTML:
<input type="checkbox" class="hidden" id="single_checkbox" />
<label class="btn" for="single_checkbox">Single</label>
<br/><br/>
<div class="btn-group">
<input type="checkbox" id="checkbox_1" />
<label class="btn" for="checkbox_1">Checkbox one</label>
<input type="checkbox" id="checkbox_2" />
<label class="btn" for="checkbox_2">Checkbox two</label>
<input type="checkbox" disabled id="checkbox_3" />
<label class="btn" for="checkbox_3">Disabled checkbox three</label>
</div>
<br/>
<div class="btn-group">
<input type="radio" name="radios" id="radio_1" />
<label class="btn" for="radio_1">Radio one</label>
<input type="radio" name="radios" id="radio_2" />
<label class="btn" for="radio_2">Radio two</label>
<input type="radio" name="radios" id="radio_3" />
<label class="btn" for="radio_3">Disabled radio three</label>
</div>
相关文章:
- 复选框/单选按钮-添加所选项目的总价
- 单选按钮的验证(启用)&使用Jquery Optimization从复选框中选择submit按钮
- 单击单选按钮时选中所有复选框
- 在jquery中选中复选框时启用confirmbox按钮
- 基于单选按钮和复选框的数据表排序
- JavaScript - 如果未选中复选框,则取消选中单选按钮
- 如果未选中复选框,则禁用引导输入按钮
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- Ajax + 浏览器后退按钮 = 复选框不起作用
- 引导数据切换单选按钮/复选框选中属性
- 如何绑定引导按钮复选框和表单
- 按钮复选框不保存选中的
- 在Twitter Bootstrap 3按钮(复选框)仍然是灰色后,它是未检查的
- 在Highcharts中使用按钮/复选框显示/隐藏数据的示例
- 使用jquery从状态被更改(选中或未选中)的复选框集合中获取复选框列表
- 散景-检查复选框与按钮/复选框回调
- 单选按钮+复选框组合
- 如何选择复选框集合
- 在页面重新加载后,从本地存储检索复选框集合的已保存状态
- 尝试提交“按钮复选框”的集合