Отключить добавление элементов HTML в DIV с помощью jquery

0

Вот код

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

Дальнейшие исследования, и я узнал, что только элементы формы имеют отключенный атрибут.

  • 3
    div нельзя disabled И . для селектора класса и # для селектора идентификатора.
  • 0
    Любым другим путем ?
Показать ещё 5 комментариев
Теги:

3 ответа

0

добавьте класс в 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", также я добавил кнопку "включить", чтобы показать вам, как вы можете это сделать, если вам это понадобится

Поделиться
  • 0
    Элегантно! Я никогда не думал об этом. Глупо с моей стороны: P Спасибо, кстати! :)
  • 0
    нет проблем, рад, что это помогло
0

Я думаю, что это гораздо более чистый способ, чем добавление и удаление атрибутов напрямую.

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

DEMO

Поделиться
  • 1
    div не может быть отключен, как кто-то уже указал .. вы можете добавить атрибут к нему, но это будет неправильный способ сделать это
  • 1
    Я не отключаю div, я использую универсальный селектор *, который соответствует всем элементам в div, а затем отключаю их.
Показать ещё 1 комментарий
0

Для элементов "div" не существует "отключено". Возможно, вы можете использовать логическую переменную типа "isEditable" в Javascript и установить ее в соответствующее состояние. Например:

JS Fiddle здесь: 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>
Поделиться
  • 1
    использование таких глобальных переменных не очень хороший способ работы в JS и в конечном итоге может привести к потенциальным проблемам
  • 0
    @dima: Я знаю об этом, цель здесь состоит в том, чтобы дать ОП возможный подход / выход. Очевидно, что в более крупном приложении можно / не следует выпускать такие глобальные переменные. Но если бы все, что у меня было, это HTML, который я вставил выше, я бы с радостью использовал глобальную переменную, только я :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню