jqtouch - включить флажок с Javascript после того, как пользователь изменил значение

Я использую 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, после того, как пользователь нажал флажок?

[Edit] У меня есть полный пример для 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 секунды, но только до тех пор, пока пользователь не нажмет на это.

Надеюсь, теперь мой вопрос немного яснее. И извините за мой плохой английский. [/редактировать]

Источник

1 ответ

Во-первых, на самом деле вы устанавливаете или снимаете флажки, а не включаете и отключаете их (отключено означает, что пользователь больше не может устанавливать или снимать флажок). Во-вторых, проверяемое свойство не имеет значения true/false (хотя это имеет больше смысла), вам нужно установить флажок в "флажок", чтобы проверить его, и удалить свойство, чтобы снять его.

$('#1').attr('checked', 'checked'); //Check
$('#1').removeAttr("checked"); //Uncheck
Источник
Другие вопросы по тегам