0

我使用 jqtouch 并有一个复选框：

<li>Checkbox1<span class="toggle"><input type="checkbox" id="1" onclick="Javascript:SetGPIO('1')"> </span></li>

我可以启用此复选框：

$('#1').prop('checked', true);

或者

$('#1').attr('checked', true);

我可以禁用

$('#1').removeAttr("checked");

这很好用。但是，一旦用户切换了复选框，则无法通过上面的代码设置复选框。我也尝试过：

$('#1').prop("checked",false); //Enables the checkbox (?)
$('#1').attr('checked', false); //enables the checkbox (?)

用户按下复选框后，我该怎么做才能通过 JavaScript 设置复选框？

[编辑] 我这里有一个完整的 jqtouch 示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch &beta;</title>
<link rel="stylesheet" href="../../themes/css/jqtouch.css"
    title="jQTouch">

<script src="../../src/lib/zepto.min.js" type="text/javascript"
    charset="utf-8"></script>
<script src="../../src/jqtouch.min.js" type="text/javascript"
    charset="utf-8"></script>
<!-- Uncomment the following two lines (and comment out the previous two) to use         jQuery instead of Zepto. -->
<!-- <script src="../../src/lib/jquery-1.7.min.js" type="application/x-javascript"     charset="utf-8"></script> -->
<!-- <script src="../../src/jqtouch-jquery.min.js" type="application/x-javascript"         charset="utf-8"></script> -->

<script src="../../extensions/jqt.themeswitcher.min.js"    
type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon : 'jqtouch.png',
        icon4 : 'jqtouch4.png',
        addGlossToIcon : false,
        startupScreen : 'jqt_startup.png',
        statusBar : 'black-translucent',
        themeSelectionSelector : '#jqt #themes ul',
        preloadImages : []
    });

    // Some sample Javascript functions:
    $(function() {

        // Show a swipe event on swipe test
        $('#swipeme').swipe(
                function(evt, data) {
                    var details = !data ? '' : '<strong>' + data    .direction    
                            + '/' + data.deltaX + ':' + data.deltaY    
                            + '</strong>!';
                    $(this).html('You swiped ' + details);
                    $(this).parent().after('<li>swiped!</li>')
                });

        $('#tapme').tap(function() {
            $(this).parent().after('<li>tapped!</li>')
        });

        $('a[target="_blank"]').bind('click', function() {
            if (confirm('This link opens in a new window.')) {
                return true;
            } else {
                return false;
            }
        });

        // Page animation callback events
        $('#pageevents').bind(
                'pageAnimationStart',
                function(e, info) {
                    $(this).find('.info').append(
                        'Started animating ' + info.direction    
                                    + '&hellip;  And the link '    
                                    + 'had this custom data: '    
                                    +         $(this).data('referrer').data('custom')
                                    + '<br>'); 
                }).bind(
                'pageAnimationEnd',
                function(e, info) {
                    $(this).find('.info').append(
                            'Finished animating ' + info.direction
                                    + '.<br><br>');

                });

        // Page animations end with AJAX callback event, example 1 (load remote     HTML only first time)
        $('#callback').bind(
                'pageAnimationEnd',
                function(e, info) {
                    // Make sure the data hasn't already been loaded     (we'll set 'loaded' to true a couple lines further down)
                    if (!$(this).data('loaded')) {
                        // Append a placeholder in case the remote     HTML takes its sweet time making it back
                        // Then, overwrite the "Loading"     placeholder text with the remote HTML
                        $(this).append(
                                    $('<div>Loading</div>').load(
                                        'ajax.html .info',    
                                        function() {    
                                            //     Set the 'loaded' var to true so we know not to reload
                                            //     the HTML next time the #callback div animation ends
                                                $(this).parent().data('loaded',
                                                    true);
                                    }));    
                }    
            });    
        // Orientation callback event
        $('#jqt').bind('turn', function(e, data) {
        $('#orient').html('Orientation: ' + data.orientation);
    });

});



function toggleCheckbox(){

if ($('#myCheckbox1').attr('checked') == 'true'){
    $('#myCheckbox1').removeAttr("checked");
}
else {
    $('#myCheckbox1').attr('checked', true);
}
window.setTimeout('toggleCheckbox()', 2000); //toggle every 2 seconds
}

toggleCheckbox();

</script>
<style type="text/css" media="screen">
#jqt.fullscreen #home .info {
display: none;
}

div#jqt #about {
padding: 100px 10px 40px;
text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0;
color: #999;
font-size: 13px;
text-align: center;
background: #161618;
}

div#jqt #about p {
margin-bottom: 8px;
}

div#jqt #about a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<div id="jqt">
    <div id="home" class="current">
        <div class="scroll">
            <ul class="rounded">
                <li>MyCheckbox<span class="toggle"><input
                        type="checkbox" id="myCheckbox1" >
                </span>
                </li>
            </ul>

        </div>
    </div>

</div>
</body>

该复选框每 2 秒切换一次，但仅在用户单击它之前。

我希望现在我的问题更清楚一点。对不起我的英语不好。[/编辑]

4

1 回答 1

0

首先，您实际上所做的是选中和取消选中这些框，而不是启用和禁用它们（禁用意味着用户不能再选中或取消选中该框）。其次，checked 属性未设置为 true/false（尽管这更有意义），您必须将 checked 设置为“checked”才能对其进行检查，并删除该属性以取消选中它。

$('#1').attr('checked', 'checked'); //Check
$('#1').removeAttr("checked"); //Uncheck
于 2012-11-30T20:00:34.763 回答