Question

我已经获得了带有按钮组和提交按钮的HTML代码。脚本代码检查它是否被选中，并根据该选择提交。如果未选择任何按钮，则显示警报。

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row testRow">
    <div class="btn-group btnGeneral">
        <button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
        <button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
    </div>
</div>
     
<br/> 
<br/> 
<div class="row">
    <button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button> 
</div>

{{1}}

它不起作用。我错过了什么？

编辑：在按钮点击上添加了选择按钮类。

Answer 1

我稍微更新了你的JS：

$("#Save").on("click", Save);

$(".btnStatus").on("click", function(){
    $(".btnStatus").removeClass("selected");
    $(this).addClass("selected");
});

function Save(e) 
{
if (GeneralStatusAlert(e) == false) {
    return;
}
else{
     $('#frmSubmit').submit();
    }
}


function GetGeneralStatus() {
    var value = "";  
    value = $("div.btn-group").find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

基本上，当您点击状态按钮时，您没有添加selected课程。你的代码var object = $(this).find(".btn-group");也找不到任何东西。（由于使用this）

Answer 2

您的示例代码中存在一些问题

1：bootstrap.js依赖于JQuery，因此需要先添加它。

2：缺少在状态按钮上添加所选课程的代码

3：没有id btnGeneral 的元素，您使用了错误的选择器。 btnGeneral是一个类，应该通过。

访问

4：你的意思是$（行）而不是$（this）

    var row = $("#btnGeneral").closest(".row")   
    var object = $(this).find(".btn-group");

更新了示例代码。

$("#Save").on("click", Save);

$(".btn").on("click", function(){
     $(this).addClass("selected");
     $(this).siblings().removeClass("selected");
});

function Save(e) {
    if (GeneralStatusAlert(e) == false) {
        return;
    } else {
        alert("Submitting");
        $('#frmSubmit').submit();
    }
}

function GetGeneralStatus() {
    var value = "";
    var row = $(".btnGeneral").closest(".row")   
    var object = $(row).find(".btn-group");
    value = $(object).find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>



<div class="row">
    <div class="btn-group btnGeneral">
        <button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
        <button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
    </div>
</div>
     
<br/> 
<br/> 
<div class="row">
    <button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button> 
</div>

查找是否选择了按钮

2 个答案: