<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Readonly Element Mock</title>
</head>
<body>
<button id="readonlyon">Readonly On</button>
<button id="readonlyoff">Readonly Off</button>
<button id="disabledon">Disabled On</button>
<button id="disabledoff">Disabled Off</button>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<form id="myForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="text" class="control-label">Text input</label>
</div>
<div class="col-md-6">
<input id="text" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="select" class="control-label">Select</label>
</div>
<div class="col-md-6">
<select id="select" class="form-control">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Radio
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="gender">a
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender">b
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox">
</label>
<p class="help-block"></p>
</div>
</div>
</div>
</form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
var textInput, select, radio, checkbox;
textInput = new QfqNS.Element.Textual($('#text'));
select = new QfqNS.Element.Select($('#select'));
radio = new QfqNS.Element.Radio($('input[type=radio]'));
checkbox = new QfqNS.Element.Checkbox($('#checkbox'));
QfqNS.Log.level = 0;
$('#readonlyon').click(function () {
textInput.setReadOnly(true);
select.setReadOnly(true);
radio.setReadOnly(true);
checkbox.setReadOnly(true);
});
$('#readonlyoff').click(function () {
textInput.setReadOnly(false);
select.setReadOnly(false);
radio.setReadOnly(false);
checkbox.setReadOnly(false);
});
$('#disabledon').click(function () {
textInput.setEnabled(false);
select.setEnabled(false);
radio.setEnabled(false);
checkbox.setEnabled(false);
});
$('#disabledoff').click(function () {
textInput.setEnabled(true);
select.setEnabled(true);
radio.setEnabled(true);
checkbox.setEnabled(true);
});
});
</script>
</body>
</html>