必要に応じてユーザーがカスタム名を入力できるようにするカメラのリストを作成しようとしています。理想的には、チェックボックスまたは周囲のテキストを選択すると、テキストを変更できるようになります。Name は後で DB に保存する必要があります。
「簡単に編集できるテキスト」を使ってみたのですが、わかりません。これが私が持っているものです。どんな助けでも大歓迎です。ありがとうございました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>FMVSS - Camera Selection</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
</head>
<body>
<div data-role="page">
<h1>Camera Selection</h1>
<div data-role="content">
<form action="#" method="get">
<h3>Camera request for: (Customer Name, passed or queryied)</h3>
<h3>Test Type: (Passed or queryied)</h3>
<div data-role="fieldcontain">
<div><legend>Do a look-up to see what the default views are for the selected TEST TYPE</legend></div>
<div><legend>Allow custom entries</legend></div>
<fieldset data-role="Selections">
<div class="Fixed_Camera_Check_Box">
<input type="checkbox" name="CameraView-1" id="CameraView-1" />
<label for="CameraView-1">Oblique View From Front (Left Hand Side)</label>
</div>
<div class="Fixed_Camera_Check_Box">
<input type="checkbox" name="CameraView-2" id="CameraView-2" />
<label for="CameraView-2">Oblique View From Front (Right Hand Side)</label>
</div>
<div class="Fixed_Camera_Check_Box">
<input type="checkbox" name="CameraView-3" id="CameraView-3" />
<label for="CameraView-3">Oblique View From Rear (Right Hand Side)</label>
</div>
<div class="Custom_Camera_Check_Box">
<input type="checkbox" name="CameraView-7" id="CameraView-7" />
<label class="custom" for="CameraView-7">Custom Camera View #1 ***Value should be editable by user***</label>
</div>
<div class="Custom_Camera_Check_Box">
<input type="checkbox" name="CameraView-8" id="CameraView-8" />
<label class="custom" for="CameraView-8">Custom Camera View #2</label>
</div>
</fieldset>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
<script>
$(document).ready(function(){
$('.custom').click(function(){ //this runs when you click on the
$(this).html('New Label Here'); //I can edit the label here, so I know I am in the right place
//$(this).hide(); //Should hide the label making room for the input
$(this).append('<input class="custom_edit" type="text" value="Custom Camera View"/>'); //Puts an input field in the form
});
$('.custom_edit').blur(function() { //this runs after you click out of textbox
if ($.trim(this.value) == '') //If there is nothing in the textbox do this
{} //put previous value back
else //If there is something in the textbox do this
{$(this).prev().html(this.value);} //Put new value into label
$(this).hide(); //Hides text box
$(this).prev().show(); //Shows the label
});
$('.custom_edit"]').keypress(function(event) { //runs on every keystroke while in a textbox, looking for enter
if (event.keyCode == '13')
{ //"ENTER" was pressed alert('1');
if ($.trim(this.value) == '') //If there is nothing in the textbox do this
{} //put previous value back and unselect checkbox
else//If there is something in the textbox do this
{$(this).prev().html(this.value);} //Put new value into label
$(this).hide(); //Hides the edit box
$(this).prev().show(); //Shows the label
}
});
$('input[type=checkbox]').on('click',function(e) {
if( $('input[type=checkbox]:checked').length == 3 )
{$('input[type=checkbox]:not(:checked)').attr('disabled','disabled');}
else
{$('input[type=checkbox]:not(:checked)').removeAttr('disabled');}
});//endo of checkbox click functions
});//end of document ready
</script>