Включить и отключить Div и его элементы в Javascript [дубликат]


этот вопрос уже есть ответ здесь:

Я ищу способ, чтобы включить и отключить в div id= "dcalc" и ее детей.

<div id="dcalc" class="nerkheArz"
 style="left: 50px; top: 150px; width: 380px; height: 370px;
 background: #CDF; text-align: center" >
 <div class="nerkh-Arz"></div>
 <div id="calc"> </div>
</div>

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

это то, что я пробовал

document.getElementById("dcalc").disabled = true;
3   51   2011-12-08 02:55:59

3 ответа:

вы должны быть в состоянии установить их через attr() или prop() функции в jQuery, как показано ниже:

jQuery (

// 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;
}

Если вы хотите отключить все элементы управления div, вы можете попробовать добавить прозрачный div на div, чтобы отключить, вы сделаете его unclickable, а также использовать 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>');

ниже выбираются все элементы-потомки и отключаются:

$("#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);

для повторного включения вы просто установите "отключено" в 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() если это уместно.