个人中心
gpt4 book ai didi

java - 在复选框选择上启用/禁用选项卡

转载 作者：行者123 更新时间：2023-11-29 06:04:24 25 4
gpt4 key购买 nike

我在 jsp 页面中有一个复选框，当我单击该复选框控件时，它会转到第二个选项卡(div)，即

这里有一个假想的篮子...

但如果我没有选中然后控件将保留在第一个选项卡中，尽管单击第二个选项卡控件将不会转到第二个选项卡。完整源代码: http://flowplayer.org/tools/demos/tabs/wizard.html

但我的要求是，当我选中复选框时，自动控制会将我带到第二个选项卡。但是在这里选中复选框后，我必须单击第二个选项卡，然后我才能看到它的内容。但我希望在选中第一个选项卡中的复选框后，控件会自动将我带到第二个选项卡。如何做呢？我需要帮助。

I am giving codes:
1. First tab content
2. Second tab content
3. Third content
4. Full source code

第一个标签代码:

<div>

        <label>
            Username <br />
            <input name="username"/>
        </label>

        <label>
            Email <br />
            <input name="email"/>
        </label>

        <label>
            <input id="terms" type="checkbox" />
            I accept <a href="#">these</a> terms and conditions
        </label>

        <p>
            <button class="next">Next &raquo;</button>
        </p>

    </div>

第二个标签代码:

<div>
        <h2>An imaginary basket is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
            <button class="next">Next &raquo;</button>
        </p>
    </div>

第三个标签代码:

<div>
        <h2>An imaginary order is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
        </p>

    </div>

完整源代码:

<!DOCTYPE html>

<html>

<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.

http://flowplayer.org/tools/demos/

Do *not* reference CSS files and images from flowplayer.org when in production  

Enjoy!

-->

<head>
<title>jQuery Tools standalone demo</title>

<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>


<!-- standalone page styling (can be removed) -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   



<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/tabs.css"/>


<style>

accept
I think this will solve your problem,

It has validations on checkboxes to continue with next tabs.

http://flowplayer.org/tools/demos/tabs/wizard.html

/* tab pane styling */
.panes div {
display:none;       
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}


div.panes div {
    background:#fff url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x 0 5px;
    -background:#fff;
    height:172px;
}

div.panes label {
    margin-bottom:15px;
    display:block;
}

label.error {
    color:red;
}
</style>
</head>

<body>

<div id="wizard">

<!-- tabs -->
<ul class="tabs">
    <li><a href="#" class="w2">Personal info</a></li>
    <li><a href="#" class="w2">Shopping basket</a></li>
    <li><a href="#" class="w2">Review order</a></li>
</ul>

<!-- panes -->
<div class="panes">
    <div>

        <label>
            Username <br />
            <input name="username"/>
        </label>

        <label>
            Email <br />
            <input name="email"/>
        </label>

        <label>
            <input id="terms" type="checkbox" />
            I accept <a href="#">these</a> terms and conditions
        </label>

        <p>
            <button class="next">Next &raquo;</button>
        </p>

    </div>

    <div>
        <h2>An imaginary basket is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
            <button class="next">Next &raquo;</button>
        </p>
    </div>

    <div>
        <h2>An imaginary order is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
        </p>

    </div>
</div>

<!-- activate tabs with JavaScript -->
<script>
$(function() {



// get container for the wizard and initialize its exposing
var wizard = $("#wizard").expose({color: '#789', lazy: true});

// enable exposing on the wizard
wizard.click(function() {
    $(this).expose().load();
});



// enable tabs that are contained within the wizard
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {

    /* now we are inside the onBeforeClick event */

    // ensure that the "terms" checkbox is checked.
    var terms = $("#terms");
    if (index > 0 && !terms.get(0).checked)  {
        terms.parent().addClass("error");

        // when false is returned, the user cannot advance to the next tab
        return false;
    }

    // everything is ok. remove possible red highlight from the terms
    terms.parent().removeClass("error");
});



// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");

// "next tab" button
$("button.next", wizard).click(function() {
    api.next();
});

// "previous tab" button
$("button.prev", wizard).click(function() {
    api.prev();
});

});
</script>



</body>

</html>

最佳答案

您想切换到第二个选项卡，何时选中第一个选项卡上的复选框？

// when checkbox is clicked
$('#terms').click(function() {
    // is checkbox checked
    if ($(this).is(':checked')) {
        // select tab 1
        $('#wizard').tabs('select', 1);
    }
});

这里是example .

===更新===

现在第二个选项卡被禁用，而复选框未被选中:

$('#wizard').tabs({ disabled: [1] });

// when checkbox is clicked
$('#terms').click(function() {
    // is checkbox checked
    if ($(this).is(':checked')) {
        // enable tab 1
        $('#wizard').tabs('enable', 1);
        // select tab 1
        $('#wizard').tabs('select', 1);
    } else {
        // disable tab 1
        $('#wizard').tabs('disable', 1);
    }
});

这里是 updated example .

关于java - 在复选框选择上启用/禁用选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9044924/

25 4 0
文章推荐： java - 从文本域中读取值
文章推荐： mysql - 将年月替换为年月
文章推荐： php - 与此等效的 mysqli 是什么？
文章推荐： Java - 将对象以多态方式传递给接受通用参数的方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com