Question

我有一个模态，在我的模态上我有一定的控制权，还有3个单选按钮。我希望用户能够选择/取消选择单选按钮，或者我希望用户只选择1个单选按钮。我正在使用knockoutjs将数据绑定到我的模态。

模态：

<div id="ModalGroup" class="modal hide fade" data-bind="with: Data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Add Group</h3>
    </div>
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label">
                Group Name
            </label>
            <div class="controls">
                <input type="text" id="GroupName" data-bind="value: GroupName" />
            </div>

            <label class="control-label">
                Group Description
            </label>
            <div class="controls">
                <input type="text" id="GroupDescription" data-bind="value: GroupDescription" />
            </div>

            <label class="control-label">Group Scope</label>
            <div class="controls" id="scope">
                <label class="radio">
                    <input type="radio" id="Local" name="Local" value="Local" />
                    Local
                </label>
                <label class="radio">
                    <input type="radio" id="Global" name="Global" value="Global" />
                    Global
                </label>
                <label class="radio">
                    <input type="radio" id="Universal" name="Universal" value="Universal" />
                    Universal
                </label>
            </div>
            <div class="controls">
                <label class="control-label">
                    Security
                </label>
                <input id="IsSecurity" type="checkbox" checked="checked" data-bind="value: IsSecurity" />
                Is Security?
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="CreateGroup" data-bind="click: vm.Save">Create Group</button>
    </div>
</div>

视图模型：

vm = {
        Data: ko.observable(),

        Add: function () {
            $("#ModalGroup").modal("show");

            vm.Data(ko.utils.unwrapObservable(ko.mapping.fromJS({
                GroupName: "",
                GroupScope: "",
                GroupDescription: ""
            })));

            if (!vm.Bound) {
                ko.applyBindings(vm);
                vm.Bound = true;
            }
        }
}

我尝试使用$('#ModalGroup').show('modal').on()功能，然后我可以选择/取消选择我的单选按钮，但我的绑定不起作用。不确定如何将所有这些放在一起。

选择/删除的Jquery：

$('input[type=radio]').change(function () {
   if (this.checked) {
       $(this).closest('.scope')
         .find('input[type=radio]').not(this)
         .prop('checked', false);
   }
});

Jquery是我在$('#ModalGroup').show('modal').on()

中使用的

Answer 1

我找到了解决方案：

$("input[type='radio']").click(function (event) {
        // If the button is selected.
        if ($(this).hasClass("checked")) {
            // Remove the placeholder.
            $(this).removeClass("checked");
            // And remove the selection.
            $(this).removeAttr("checked");
            // If the button is not selected.
        } else {
            // Remove the placeholder from the other buttons.
            $("input[type='radio']").each(function () {
                $(this).removeClass("checked");
            });
            // And add the placeholder to the button.
            $(this).addClass("checked");
        }
    });

这将选择/取消选择单选按钮

选择/取消选择模态中的单选按钮

1 个答案: