Включить и отключить Div и его элементы в Javascript

Ответ 1

Вы можете установить их с помощью attr() или prop() функций в jQuery как показано ниже:

jQuery (< 1.7):

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

или

// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");

jQuery ( >= 1.7):

// This will disable just the div
$("#dcacl").prop('disabled',true);

или

// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);

или

//  disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);

JavaScript:

// This will disable just the div
document.getElementById("dcalc").disabled = true;

или

// This will disable all the children of the div
var nodes = document.getElementById("dcalc").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
     nodes[i].disabled = true;
}

Ответ 2

Если вы хотите отключить все элементы управления div, вы можете попробовать добавить прозрачный div в div для отключения, вы сделаете его незаметным, также используйте fadeTo для создания отключенного внешнего вида.

попробуйте это.

$('#DisableDiv').fadeTo('slow',.6);
$('#DisableDiv').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

Ответ 3

Следующее выбирает все элементы-потомки и отключает их:

$("#dcacl").find("*").prop("disabled", true);

Но действительно имеет смысл отключить определенные типы элементов: входы, кнопки и т.д., поэтому вам нужен более конкретный селектор:

$("#dcac1").find(":input").prop("disabled",true);
// noting that ":input" gives you the equivalent of
$("#dcac1").find("input,select,textarea,button").prop("disabled",true);

Чтобы снова включить вас, установите для параметра "disabled" значение false.

Я хочу отключить их при загрузке страницы, а затем щелчком я могу включить их

ОК, поэтому поставьте вышеуказанный код в обработчик документа и настройте соответствующий обработчик кликов:

$(document).ready(function() {
    var $dcac1kids = $("#dcac1").find(":input");
    $dcac1kids.prop("disabled",true);

    // not sure what you want to click on to re-enable
    $("selector for whatever you want to click").one("click",function() {
       $dcac1kids.prop("disabled",false);
    }
}

Я кэшировал результаты селектора при допущении, что вы не добавляете больше элементов в div между загрузкой страницы и кликом. И я привязал обработчик кликов .one(), так как вы не указали требование повторно отключить элементы, так что предположительно только событие необходимо обрабатывать один раз. Конечно, вы можете изменить .one() на .click(), если это необходимо.