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 に答える