Disable adding HTML elements to the DIV using jquery
Question
Here is the code
<div id="whatever">
/* I have setted up a button to enter html code in this div via jquery*/
/* Now I want to devise another button which will disable further addition addition to the div elements with the previous html as it is*/
</div>
How can I do this ? Is there any way apart from jquery(maybe CSS). I tried :
$(".whatever").attr("disabled", "disabled");
$(".whatever").prop("disabled", "disabled");
Further research and I came to know that only form elements have a disabled attribute.
3 answers
solution1
0 2014-04-18 17:05:47
add a class to the div when you click the button that you want to disable div with, say disabled ... and then check for this class in the appropriate piece of code to see if it's present, if so - don't add anything to it...
something along these lines:
$('.addButton').click(function(){
if ($('#whatever').hasClass('disabled'))
return false;
// your code here
});
$('.disableButton').click(function(){
$('#whatever').addClass('disabled')
});
Here is the working FIDDLE .
By clicking "add html" button it appends html to the div, by clicking "disable" button - it disables the div and you won't be able to add new html to it when you click "add html" button, also I added "enable" button just to show you how you can do it in case you'll need it
solution2
0 2014-04-18 17:07:04
I think it's a much cleaner way than adding and removing attributes directly.
$("div *").disable();
solution3
0 2014-04-18 17:13:09
There is no 'disabled' state for 'div' elements. What you can possibly do is that you can use a boolean variable like 'isEditable' in Javascript and set it to the respective state. For example:
JS Fiddle here: http://jsfiddle.net/weM57/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var isEditable = true;
$("#btnAdd").click(function() {
if (isEditable) {
$("#whatever").append("<p>this is some content</p>");
} else {
$("#status").html("<p>The div is not editable at the moment</p>");
}
});
$("#btnDisable").click(function() {
isEditable = false;
$("#status").html("<p>The div is not editable anymore</p>");
});
$("#btnEnable").click(function() {
isEditable = true;
$("#status").html("<p>The div is editable now</p>");
});
});
</script>
</head>
<body>
<input type="button" id="btnAdd" value="Add Content" />
<hr />
<input type="button" id="btnDisable" value="Disable Content Adding" />
<input type="button" id="btnEnable" value="Enable Content Adding" />
<hr />
<div id="whatever">
</div>
<div id="status" style="border: dotted 1px gray; background-color: yellow; padding: 20px;">
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.