jQuery를 사용하여 입력 비활성화된 특성 전환

jQuery를 사용하여 입력 비활성화된 특성 전환

여기 내 코드가 있습니다.

$("#product1 :checkbox").click(function(){
    $(this)
        .closest('tr') // Find the parent row.
            .find(":input[type='text']") // Find text elements in that row.
                .attr('disabled',false).toggleClass('disabled') // Enable them.
                .end() // Go back to the row.
            .siblings() // Get its siblings
                .find(":input[type='text']") // Find text elements in those rows.
                .attr('disabled',true).removeClass('disabled'); // Disable them.
});

토글 방법.attr('disabled',false);?

구글에서 찾을 수 없는 것 같습니다.

$('#el').prop('disabled', (i, v) => !v);

메서드는 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.

논쟁들

• 속성(예:disabled,checked,selected) 참이거나 거짓일 수 있는 모든 것
• 속성은 다음과 같을 수 있습니다.
  • (empty)현재 값을 반환합니다.
  • boolean속성 값을 설정합니다.
• function 일치하는 각 요소에 대해 호출되며 반환된 값은 속성을 설정하는 데 사용됩니다.두 개의 인수가 전달되었습니다. 첫 번째 인수는 인덱스(0으로 시작하는 숫자는 발견된 각 요소에 대해 증가함)입니다.두 번째 인수는 요소의 현재 값(true/false)입니다.

그래서 이 경우에는 지수를 제공해주는 함수를 사용했습니다 (i) 및 전류 값(v), 그러면 현재 값과 반대로 반환했기 때문에 속성 상태가 반대가 됩니다.

부가정보

그.prop()method는 일치된 집합의 첫 번째 요소에 대해서만 속성 값을 가져옵니다.설정되지 않은 속성의 값에 대해 정의되지 않은 값을 반환하거나 일치하는 집합에 요소가 없는 경우 반환합니다.각 요소에 대한 값을 개별적으로 얻으려면 jQuery's와 같은 루프 구성을 사용합니다..each()아니면.map()방법.

속성 vs.특성.

속성과 속성 간의 차이는 특정 상황에서 중요할 수 있습니다.jQuery 1.6 이전에는.attr()method는 일부 특성을 검색할 때 속성 값을 고려하는 경우가 있으며, 이로 인해 일관되지 않은 동작이 발생할 수 있습니다.jQuery 1.6 기준,.prop()method는 속성 값을 명시적으로 검색할 수 있는 방법을 제공합니다..attr()속성을 검색합니다.

전체 브라우저 비교 가능성을 확보해야 할 것 같습니다.disabled값으로 설정해야 합니다.disabled아니면 제거당합니다!
여기 제가 방금 만든 작은 플러그인이 있습니다.

(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

예제 링크.

편집: 예제 링크/코드를 체인성을 유지하도록 업데이트했습니다!
편집 2:
@lonesomeday comment를 기반으로 한 향상된 버전은 다음과 같습니다.

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

$('#checkbox').클릭(함수 (){$('#submit'.tract (' 비활성화', !$(이것.tract ('checked')))});

확인란을 클릭하면 업데이트되는 또 다른 간단한 옵션.

HTML:

<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>

jQuery:

$('#checkbox').click(function() {
    if (this.checked) {
        $('#item').prop('disabled', false); // If checked enable item       
    } else {
        $('#item').prop('disabled', true); // If checked disable item                   
    }
});

작업 중: 링크

얼마 후 @arne 덕분에 입력을 비활성화하고 숨겨야 할 위치를 처리하기 위해 이와 유사한 작은 기능을 만들었습니다. 또는 활성화하고 표시하는:

function toggleInputState(el, on) {
  // 'on' = true(visible) or false(hidden)
  // If a field is to be shown, enable it; if hidden, disable it.
  // Disabling will prevent the field's value from being submitted
  $(el).prop('disabled', !on).toggle(on);
}

그런 다음 $('input[name="something"')와 같은 jQuery 개체는 다음을 사용하여 간단히 전환됩니다.

toggleInputState(myElement, myBoolean)

콜백 구문은 다음과 같이 매우 간단합니다.

$("#product1 :checkbox").click(function(){
  $(this)
   .closest('tr') // find the parent row
       .find(":input[type='text']") // find text elements in that row
           .attr('disabled',function(idx, oldAttr) {
               return !oldAttr; // invert disabled value
           })
           .toggleClass('disabled') // enable them
       .end() // go back to the row
       .siblings() // get its siblings
           .find(":input[type='text']") // find text elements in those rows
               .attr('disabled',function(idx, oldAttr) {
                   return !oldAttr; // invert disabled value
               })
               .removeClass('disabled'); // disable them
});

언급URL : https://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery