함수

Question

으로이를 작성하는 방법은 종류의 새로운 JQuery와에 그리고 난 토글 형 JQuery와 조각 아래 작성했습니다. 단지 이것을 작성하는 더 좋은 방법이 무엇인지 궁금해서 재사용 할 수 있습니다.

그것은 다음과 같이 작동합니다. 기본적으로 라디오 금액 옵션 중 하나 (클래스 'nOther')를 클릭하면 다른 금액 텍스트 상자가 비활성화됩니다. 그러나 다른 금액의 라디오를 클릭하면 텍스트 상자가 활성화됩니다.

$("input[type='radio'][name='giftType'][value='Other']").click(function(){ 
     $("input[type='text'][name='otherAmount']").removeAttr('disabled'); 
}); 
$("input[type='radio'][name='giftType'][class='nOther']").click(function(){ 
     $("input[type='text'][name='otherAmount']").attr('disabled', 'disabled'); 
}); 

은 분명히 그래서 난 다시 사용할 수있는이 쓸 수있는 더 나은 방법이 그것

기능처럼 뭔가 ('값', '클래스') { ... }

어떤 도움 대단히 감사합니다.

Answer 1

:

$('input[name="giftType"]').click(function(){ 
    $('input[name="otherAmount"]').attr('disabled',($(this).val() != 'Other')) 
}); 

이것은 무선 회로 차단기의 그룹을 확인 ns의 이름이 "giftType"이고 값이 "기타"인 텍스트 상자가 선택된 경우 "otherAmount"라는 이름의 텍스트 상자는 사용 불가능합니다. 그렇지 않으면 사용 불가능하지 않습니다. 테스트하려면 jsFiddle입니다.

는 뒤로 상태 확인 (==! =합니다)

Answer 2

간단한 선택기로 시도해보십시오.

$("input[name='giftType']").click(function(){ 
    $("input[name='otherAmount']").prop('disabled', ($(this).val() != 'Other')); 
}); 

참고 : 나는/사용 요소의 속성을 설정하는 권장 방법입니다 텍스트 상자를 사용하지 않도록 prop 방법을 사용하고 있습니다. 첫째

Answer 3

몇 가지 일반적인 포인터 :

1. jQuery를이 셀렉터가 느린 중입니다 속성, 그래서 시도하고 가능한 태그 이름, 클래스와 ID를 사용합니다.
2. 기본적으로 사용되지 않는 요소가 사용 가능하므로 Enabled는 유효한 속성이 아닙니다. 당신이 사용할 수 다움을 확인하려면 나중에 코드에 당신이 $ 할 수 있습니다 ("입력 :하지 ([장애인])") 당신은 만들 수
3. 아래보다 효율적으로 당신이 너무 들어있는 요소를 지정할 수 있습니다, 당신 때문에 "$ ("#의 myContainerId ")로 시작 거라고. 찾기 ("입력 [TYPE = '무선'] ")
4. 를 함수에 포장해서 반드시 물품 더 좋은 방법이 아니다. 사이트의 코드가 얼마나 복잡한 지에 따라 코드를 정리하여 여러 가지 방법으로 정리할 수 있습니다. 그러나 일반적으로 페이지 당 한 번 이상 코드가 호출되면 함수에 있어야합니다.
5. 나는 그러나 DOM로드 (및 전역 변수를 추가하지의) 때문에 함수의 범위에 싸여되고있는 모든 것을 (추가 이점이 후까지 실행되는 코드를 지연시키는 JQuery와 익명 함수 래퍼 코드를 감쌌다 DOM을 행

F 대해 어떻게

$(function() { 
    var otherAmountInputs = $("input[type='text'][name='otherAmount']"); //cache this expensive query 
    $("input[type='radio']") 
    .filter("[name='giftType'][value='Other']").click(function(){ 
     otherAmountInputs.removeAttr('disabled'); 
    }) 
    .end() 
    .filter(".nOther[name='giftType']").click(function(){ 
     otherAmountInputs.attr('disabled', 'disabled'); 
    }); 
});