div 내의 모든 양식 요소를 사용하지 않도록 설정


162

jquery / javascript에서 부모 div 이름 만 알려 주어 양식에서 모든 필드 (textarea / textfield / option / input / checkbox / submit 등)를 비활성화하는 방법이 있습니까?


4
이렇게하면 양식을 제출할 때 해당 요소의 값이 "사라지게"됩니다. 값을 유지하려면 readOnly사용하지 말고 값을 유지하십시오 .
Shadow Wizard is Ear For You


1
아이디어는 클릭을 허용 / 방지하는 컨트롤 앞에 CSS를 숨기거나 표시 할 수 있으며 CSS가있는 스타일 비활성화 된 컨트롤을 사용할 수 있습니다.
Jaider

답변:


261

:input부모 선택기와 함께 선택기를 사용해보십시오 .

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

이것을 사용하여 div 내의 모든 입력을 값 0으로 설정할 수 있습니까?
jackson5

2
<a>도 비활성화하고 싶습니다 ... 내 <a>도 클릭 할 수 있습니다
RAJ

7
인용 jQuery : : input은 jQuery 확장이며 CSS 스펙의 일부가 아니기 때문에 : input을 사용하는 쿼리는 기본 DOM querySelectorAll () 메소드가 제공하는 성능 향상을 이용할 수 없습니다. : input을 사용하여 요소를 선택할 때 최상의 성능을 얻으려면 먼저 순수한 CSS 선택기를 사용하여 요소를 선택한 다음 .filter ( ": input")를 사용하십시오.
acme

2
@acme : 100 % 동의하지만 질문에 필터링 할 수있는 선택기에 대한 힌트는 없습니다. 내가받은 유일한 정보는 사용자가 부모 div이름 으로 할 수 있어야 한다는 것입니다. 더 많은 정보가 제공되면 더 효율적인 솔루션을 얻을 수있었습니다.
Andrew Whitaker

1
.attr () 대신 .prop () 사용 (jquery 1.6 이상)
Akshay Gundewar

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

4
모든 선택자는 따옴표로 묶어야합니다 ( '입력, 텍스트 영역, 버튼'). api.jquery.com/multiple-selector 여러 인수를 보내는 방식으로 수행합니다.
Ivan Ivanić

2
텍스트 영역과 버튼을 무시하고 입력 만 찾을 수 있습니다. : 입력 선택기는 갈 길이지만 명시 적으로 나열하려면을 사용해야 $('#mydiv').find('input, textarea, button')합니다.
Mark Hildreth

1
... 또는 단지 $ ( '# your-form'). children (). prop ( 'disabled', true);
walv

@walv 코드 는 모든 양식 요소가 양식의 단일 자손 인 경우 에만 작동합니다. Find ()는 하위 수준에 관계없이 목록의 모든 요소를 ​​찾습니다. 이 코드 줄은 새로운 jquery 버전에서 attr 대신 prop을 사용하는 것 외에는 정확합니다.
Chris O

32

jquery 1.6+ .prop()의 경우 .attr(),

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

또는

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

2
당신은 옳지 만 시간 소품 작업과 시간이 작동하지 않습니다, 특히 확인란과 라디오 버튼의 원인에서
damon

나는 이것이 오래된 스레드라는 것을 알고 있지만, 타이프 스크립트를 사용할 때 약간의 오류가 발생합니다
Simon Price

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

4

이 코드 줄은 모든 입력 요소를 비활성화합니다.

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

내 의견으로는 최고의 답변입니다.
Ajay2707

2

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에 disabled를 설정하면 해당 fieldset 내부의 모든 필드가 비활성화됩니다.

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

1

여러 지점에서 아래 기능을 사용하고 있습니다. 오른쪽 선택기가 사용되는 한 테이블의 div 또는 버튼 요소에서 작동합니다. ": button"만 다시 사용할 수 없습니다.

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

하나의 솔루션에서 두 가지 큰.
3 규칙

0

다음은 모든 입력을 비활성화하지만 클래스를 btn 할 수 없으며 클래스를 추가하여 비활성화 CSS를 덮어 씁니다.

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

CSS 클래스

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

0

나를 위해 허용 된 답변이 작동하지 않는 일부 ASP 그물 숨겨진 필드가 있었으므로 표시되는 필드 만 비활성화하도록 선택했습니다.

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

0

Div 클래스를 편집하지 못하도록 CSS 클래스를 사용하십시오.

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 요소를 편집하지 못하게합니다.


0

텍스트 유형 만

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

0

내부 양식에 div단순히 양식 입력 요소가 포함 된 경우이 간단한 쿼리는 태그 내의 모든 요소 를 비활성화 합니다 form.

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

그러나, 그것은 또한 것 비활성화 에 입력 요소 이외의 form그것의 영향은 단지 형태의 각 유형에 따라서 적절한 majorly 입력 타입 요소에서 볼 수있는 바와 같이,!

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

1
두 번째 문장을 수정하십시오. 코드가 입력되지 않은 요소를 비활성화한다고 말하지만 입력 요소에만 영향을 미칩니다. 당신의 의미를 분명히하십시오. (
Night
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.