Question

这是代码

<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>

我该怎么做？除了jquery（也许是CSS）之外还有什么办法吗？我试过了：

$(".whatever").attr("disabled", "disabled");
$(".whatever").prop("disabled", "disabled");

进一步研究，我发现只有表单元素具有禁用属性。

Answer 1

当您单击要禁用div的按钮时，将该类添加到div中，例如disabled ...然后在相应的代码段中检查此类以查看是否它存在，如果是这样 - 不要添加任何东西......

这些内容：

$('.addButton').click(function(){ 
   if ($('#whatever').hasClass('disabled'))
      return false;
   // your code here
});

$('.disableButton').click(function(){
    $('#whatever').addClass('disabled')
});

这是工作FIDDLE。

通过单击“添加html”按钮，它会将html附加到div，通过单击“禁用”按钮 - 它会禁用div，当您单击“添加html”按钮时，您将无法向其添加新的html，我还添加了“启用”按钮，只是为了告诉你如何在你需要的时候做到这一点

Answer 2

我认为这比直接添加和删除属性更简洁。

$("div *").disable();

DEMO

Answer 3

没有＆＃39;禁用＆＃39;为＆＃39; div＆＃39;元素。你可以做的是你可以使用像＃is; isEditable＆＃39;这样的布尔变量。在Javascript中并将其设置为相应的状态。例如：

JS小提琴：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>

禁用使用jquery将HTML元素添加到DIV

3 个答案: