我正在尝试创建一个摄像机列表，允许用户在需要时输入自定义名称。理想情况下，当他们选择复选框或周围的文本时，他们将能够更改文本。该名称稍后需要存储在数据库中。
我尝试使用“简单可编辑文本”，但我无法弄清楚。 这是我所拥有的。任何帮助，将不胜感激。谢谢。
<!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>
最佳答案
尝试一下。
单击相机标签进行编辑。
<!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">
<fieldset data-role="Selections">
<legend>Allow custom entries - click on the label to edit</legend>
<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 -->
<script>
$(document).ready(function () {
var editCameraLabel = function (label) {
label.hide();
var labelText = label.text();
label.after("<input type='text' value='" + labelText + "' /><input type='button' value='Save' />");
var input = label.next();
input.focus();
var saveButton = input.next();
saveButton.click(function () {
labelText = input.val();
label.text(labelText);
input.remove();
$(this).remove();
label.show();
});
};
$('label').click(function () {
editCameraLabel($(this));
});
});//end of document ready
</script>
</body>
</html>
关于jquery - 用户可编辑复选框标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12303812/