Enable & Vô hiệu hóa một Div và các yếu tố của nó trong Javascript

Question

Tôi đang tìm kiếm một phương pháp để Enable và Disable các div id = "dcalc" và trẻ em của nó.

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

Tôi muốn tắt chúng khi tải trang và sau đó bằng một lần nhấp, tôi có thể bật chúng?

Đây là những gì tôi đã cố gắng

document.getElementById("dcalc").disabled = true; 

Answer 1

Bạn sẽ có thể thiết lập các thông qua attr() hoặc prop() chức năng trong jQuery như hình dưới đây:

jQuery (< 1.7):

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

hoặc

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

hoặc

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

hoặc

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

Javascript:

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

hoặc

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

Answer 2

sẽ chọn sau tất cả các yếu tố hậu duệ và vô hiệu hóa chúng:

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

Nhưng nó chỉ thực sự có ý nghĩa để vô hiệu hóa các yếu tố nhất định loại: đầu vào, nút, v.v., vì vậy bạn muốn có thêm thông tin chi tiết bộ chọn fic:

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

Để bật lại, bạn chỉ cần đặt "bị vô hiệu" thành false.

Tôi muốn Disable họ tại tải trang và sau đó bằng một nhấp chuột tôi có thể giúp họ

OK, vì vậy đặt mã trên trong một handler tài liệu đã sẵn sàng, và thiết lập một handler nhấp chuột thích hợp:

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

tôi đã lưu trữ kết quả của bộ chọn trên giả định rằng bạn không bổ sung thêm các yếu tố để div giữa tải trang và nhấp chuột.Và tôi đã đính kèm trình xử lý nhấp chuột với .one() vì bạn chưa chỉ định yêu cầu để vô hiệu hóa lại các phần tử, vì vậy có lẽ sự kiện chỉ cần được xử lý một lần. Tất nhiên bạn có thể thay đổi .one() thành .click() nếu thích hợp.

Answer 3

Nếu bạn muốn vô hiệu hóa tất cả các điều khiển của div, bạn có thể thử thêm một div trong suốt trên div để vô hiệu hóa, bạn sẽ làm cho nó không thể nhấp, cũng sử dụng fadeTo để tạo ra một hình thức vô hiệu hóa.

hãy thử điều này.

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