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);합니까?

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

$('#el').prop('disabled', function(i, v) { return !v; });

이 .prop()메소드는 두 가지 인수를 허용합니다.

• true 또는 false 인 특성 이름 (비활성화, 선택, 선택)
• 속성 값 은 다음과 같습니다.
  • ( empty )-현재 값을 반환합니다.
  • 부울 (true / false)-속성 값을 설정합니다.
  • function- 발견 된 각 요소에 대해 실행되며 리턴 된 값은 특성을 설정하는 데 사용됩니다. 전달 된 두 가지 주장이 있습니다. 첫 번째 인수는 인덱스입니다 (발견 된 각 요소마다 0, 1, 2, 증가). 두 번째 인수는 요소 의 현재 값 입니다 (true / false).

따라서이 경우 인덱스 (i)와 현재 값 (v)을 제공하는 함수를 사용한 다음 현재 값의 반대를 반환하여 속성 상태가 반전되었습니다.

나는 추측 전체 브라우저 비교를 얻기 위해 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 의견을 바탕으로 향상된 버전이 있습니다.

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

    $ ( '# checkbox'). click (function () {
        $ ( '# submit'). attr ( 'disabled',! $ (this) .attr ( '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);
}

그런 다음 jQuery 객체 (예 : $ ( 'input [name = "something"]'))는 다음을 사용하여 간단히 전환됩니다.

toggleInputState(myElement, myBoolean)

콜백 구문은 attr다음 과 같습니다.

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