Question

我已经爱上了twitter-bootstrap，我喜欢我可以用于我的应用程序的简单风格。

我想使用元素 buttons-checkbox 而不是常规复选框。

<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设置复选框的样式并将这些元素发布到FORM？

我准备了一个小提琴here。

Answer 1

您可以使用此解决方案：

http://jsfiddle.net/charettes/SauLj/

jQuery的：

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>

试图提交“按钮 - 复选框”的集合

1 个答案: