vô hiệu hóa tất cả các yếu tố hình thức bên trong div

Có cách nào để vô hiệu hóa tất cả các trường (textarea / textfield / tùy chọn / đầu vào / hộp kiểm / gửi, v.v.) trong một hình thức bằng cách chỉ nói tên div cha trong jquery / javascript?

Hãy thử sử dụng :inputbộ chọn, cùng với bộ chọn cha:

$("#parent-selector :input").attr("disabled", true);

$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

Đối với jquery 1.6+, sử dụng .prop()thay vì .attr(),

$("#parent-selector :input").prop("disabled", true);

hoặc là

$("#parent-selector :input").attr("disabled", "disabled");

    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }

Đơn giản là dòng mã này sẽ vô hiệu hóa tất cả các yếu tố đầu vào

$('#yourdiv *').prop('disabled', true);

Làm thế nào về việc đạt được điều này bằng cách chỉ sử dụng thuộc tính HTML 'bị vô hiệu hóa'

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

Chỉ bằng cách đặt bị vô hiệu hóa trong bộ trường, tất cả các trường bên trong bộ trường đó bị vô hiệu hóa.

$('fieldset').attr('disabled', 'disabled');

Tôi đang sử dụng chức năng dưới đây tại các điểm khác nhau. Hoạt động trong một phần tử div hoặc nút trong bảng miễn là bộ chọn bên phải được sử dụng. Chỉ ": nút" sẽ không kích hoạt lại cho tôi.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

Theo dõi sẽ vô hiệu hóa tất cả các đầu vào nhưng sẽ không thể vào lớp btn và cũng đã thêm lớp để ghi đè vô hiệu hóa css.

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

lớp css

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

Đối với tôi, câu trả lời được chấp nhận không hoạt động vì tôi cũng có một số trường ẩn mạng asp cũng bị vô hiệu hóa nên tôi chỉ chọn tắt các trường hiển thị

//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

Sử dụng Lớp CSS để ngăn chặn Chỉnh sửa các thành phần Div

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

Hoặc thêm tên lớp trong Thẻ HTML. Nó sẽ ngăn không cho chỉnh sửa các yếu tố Div.

Chỉ loại văn bản

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

Chỉ loại Mật khẩu

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

Chỉ loại email

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");