ปิดการใช้งานองค์ประกอบแบบฟอร์มทั้งหมดภายใน div

มีวิธีการปิดการใช้งานทุกสาขา (textarea / textfield / ตัวเลือก / input / ช่องทำเครื่องหมาย / ส่ง ฯลฯ ) ในรูปแบบโดยบอกชื่อผู้ปกครอง div ใน jquery / javascript เท่านั้น?

ลองใช้:inputตัวเลือกพร้อมกับตัวเลือกหลัก:

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

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

สำหรับ jquery 1.6+ ให้ใช้ .prop()แทน.attr(),

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

หรือ

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

เพียงบรรทัดของรหัสนี้จะปิดการใช้งานองค์ประกอบการป้อนข้อมูลทั้งหมด

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

วิธีการเกี่ยวกับการบรรลุเป้าหมายโดยใช้แอตทริบิวต์ HTML เท่านั้น 'ปิดการใช้งาน'

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

เพียงแค่ปิดการใช้งานใน fieldset ทุกฟิลด์ภายใน fieldset นั้นถูกปิดการใช้งาน

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

ฉันใช้ฟังก์ชั่นด้านล่างตามจุดต่าง ๆ ทำงานในองค์ประกอบ div หรือปุ่มในตารางตราบเท่าที่ใช้ตัวเลือกที่ถูกต้อง เพียงแค่ ": ปุ่ม" จะไม่เปิดใช้งานอีกครั้งสำหรับฉัน

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

การติดตามจะปิดใช้งานอินพุตทั้งหมด แต่จะไม่สามารถไปยังคลาส btn และเพิ่มคลาสเพื่อเขียนทับปิดใช้งาน css

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

คลาส css

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

สำหรับฉันคำตอบที่ได้รับการยอมรับใช้งานไม่ได้เนื่องจากฉันมีบางช่องที่ซ่อนอยู่ของ asp net ซึ่งถูกปิดการใช้งานด้วยดังนั้นฉันเลือกที่จะปิดใช้งานช่องที่มองเห็นได้เท่านั้น

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

ใช้คลาส CSS เพื่อป้องกันการแก้ไของค์ประกอบ Div

CSS:

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

JS:

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

หรือเพิ่มชื่อคลาสในแท็ก HTML มันจะป้องกันไม่ให้แก้ไของค์ประกอบ Div

ประเภทข้อความเท่านั้น

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

ประเภทรหัสผ่านเท่านั้น

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

ประเภทอีเมลเท่านั้น

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

หากฟอร์มของคุณอยู่ภายในdivประกอบด้วยองค์ประกอบการป้อนฟอร์มดังนั้นแบบสอบถามแบบง่ายนี้จะปิดใช้งานองค์ประกอบทั้งหมดภายในformแท็ก:

<div id="myForm">
    <form action="">
    ...
    </form>
</div>

อย่างไรก็ตามมันจะปิดการใช้งานอื่นที่ไม่ใช่องค์ประกอบการป้อนข้อมูลformเนื่องจากจะมีเอฟเฟกต์เฉพาะกับองค์ประกอบประเภทอินพุตดังนั้นจึงเหมาะสมอย่างมากสำหรับทุกรูปแบบ!

$('#myForm *').attr('disabled','disabled');