source

div 내부의 모든 폼 요소 사용 안 함

manycodes 2023. 8. 19. 10:31
반응형

div 내부의 모든 폼 요소 사용 안 함

jquery/syscript에서 부모 div 이름만 알려줌으로써 양식의 모든 필드(텍스트 영역/텍스트 필드/옵션/입력/수정/수정 등)를 비활성화할 수 있는 방법이 있습니까?

선택기와 상위 선택기를 함께 사용해 보십시오.

$("#parent-selector :input").attr("disabled", true);
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

jquery 1.6+의 경우 , 대신 사용합니다.

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

또는

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

단순히 이 코드 라인은 모든 입력 요소를 비활성화합니다.

$('#yourdiv *').prop('disabled', true);
    $(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);
        }
    }

HTML 속성 'disabled'만 사용하여 이를 달성하는 것은 어떻습니까?

<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').attr('disabled', 'disabled');

저는 아래의 기능을 다양한 지점에서 사용하고 있습니다.오른쪽 선택기가 사용되는 한 테이블의 디바 또는 버튼 요소에서 작동합니다.": 버튼"만 사용해도 다시 활성화되지 않습니다.

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

저의 경우 사용할 수 없는 일부 스패넷 숨겨진 필드가 있기 때문에 허용된 답변이 작동하지 않아 보이는 필드만 사용하지 않도록 선택했습니다.

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

Following은 모든 입력을 비활성화하지만 btn 클래스는 비활성화할 수 없으며 CSS를 덮어쓸 클래스도 추가합니다.

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

css 클래스

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

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

언급URL : https://stackoverflow.com/questions/5290525/disable-all-form-elements-inside-div

반응형