禁用使用jQuery將HTML元素添加到DIV

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();

演示

Answer 3

“ div”元素沒有“禁用”狀態。 您可能會做的是可以在Javascript中使用布爾變量（例如“ isEditable”）並將其設置為相應的狀態。 例如：

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 個解決方案

解決方案1
0 2014-04-18 17:05:47

解決方案2
0 2014-04-18 17:07:04

解決方案3
0 2014-04-18 17:13:09

禁用使用jQuery將HTML元素添加到DIV

問題描述

3 個解決方案

解決方案1 0 2014-04-18 17:05:47

解決方案2 0 2014-04-18 17:07:04

解決方案3 0 2014-04-18 17:13:09

解決方案1
0 2014-04-18 17:05:47

解決方案2
0 2014-04-18 17:07:04

解決方案3
0 2014-04-18 17:13:09