私は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 β</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
+ '… 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 秒ごとに切り替わりますが、ユーザーがこれをクリックするまでのみです。
私の質問が少し明確になったことを願っています。そして私の悪い英語でごめんなさい。[/編集]