Question

背景

我有一个表单，用户必须在添加其他用户时单击单选按钮以选择安全级别。进行一些研究后，很明显jQuery Validation与作为无线电选择的按钮不兼容。因此，我看了一下别人的解决方案，在“点击”按钮时，将隐藏值设置为按钮的值，该隐藏值是验证用户输入的值。不幸的是，它没有用。

有人可以帮我调整代码，允许这个隐藏的输入按钮假设点击按钮的值。请记住，我已经省略了一些常规输入字段，例如html中的名字和姓氏。

更新

恰好这个形式在模态窗口内。我相信Bootstrap的模态打开处理程序干扰了.on的实际jquery。任何人都可以提供“新近曝光”信息的解决方案吗？

表单中的按钮

<div class="btn-group" data-toggle="buttons" id="addSecLvlButtons" >
    <label id="addSecLvl1Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">Security Lvl 1</label>
    <label id="addSecLvl2Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption2" value="2">Level 2</label>
    <label id="addSecLvl3Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption3" value="3">Level 3</label>
    <label id="addSecLvl4Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption4" value="4">Level 4</label>
    <label id="addSecLvl5Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption5" value="5">Level 5</label>
</div>
 <input required type="hidden" name="addSecLvl" id="addSecLvl">

的jQuery

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
    $('#addSecLvl').val($(this).val());
});


//Validate the form and show hidden fields
$('#addUser').validate({
    debug: false,
    ignore: [],
    rules: {
        addFirstName: "required",
        addLastName: "required"
    },
    messages: {
        addFirstName: "Please enter the new user's first name",
        addLastName: "Please enter the new user's last name"
    }
});

可能的解决方案建议

我有这个代码，它似乎在模态窗口中使用bootstrap工作正常。也许稍微调整一下就可以了解.on的伎俩？只是试图“跳出框框思考”

$("#addUserName").focus(function() {
    var firstname = $("#addFirstName").val();
    var lastname = $("#addLastName").val();
    if(firstname && lastname && !this.value) {
        this.value = firstname + "." + lastname;
    }
});

Answer 1

好消息，你非常接近。您将标签对象传递给您的点击处理程序，而不是输入对象（请注意，您正在使用类.btn传递对象，这是标签）。

尝试这样的事情：

<强> HTML

<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">`

<强>的JavaScript

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
    $('#addSecLvl').val($(this).val());
});`

Here是一个展示代码的JSFiddle。祝你好运！

使用jQuery充当Radio的Button的Bootstrap3表单验证

背景

更新

表单中的按钮

的jQuery

可能的解决方案建议

1 个答案: