2013-10-14 4 views
0

에 함수를 적용 나는 다음과 같은 기능을 가지고 :두 개의 ID를

<script> function setFries(){ 
var el = document.getElementById("burger"); 
if(el.checked) 
    document.getElementById("opt1").disabled = false; 
else 
document.getElementById("opt1").disabled = true; } </script> 

라디오를 선택한 경우이 ungreyed하게 선택 상자를 만든다.

은 내가 "OPT2"

의 ID와, 두 ungreyed되고 싶습니다 또 다른 선택 상자가 어떻게이 위의 함수에 추가합니다.

document.getElementById("opt1").disabled && document.getElementById("opt2").disabled 

을이에 대한 몇 가지 변화하지만, 작동 얻을 수 없었다 :

나는 노력했다.

답변

3

그냥 그렇게하니?

function setFries() { 
    var el = document.getElementById("burger"); 
    if (el.checked) { 
     document.getElementById("opt1").disabled = false; 
     document.getElementById("opt2").disabled = false; 
    } else { 
     document.getElementById("opt1").disabled = true; 
     document.getElementById("opt2").disabled = true; 
    } 
} 
+0

너무 많은 라인 ... 'FALSE'와'TRUE '는 el.checked''에 대한 반대와 관련이 있습니다. 'if '브랜치로 갈 필요가 없다. 내 대답을 보라. –

+1

@OferZelig 코딩 스타일에 따라 다릅니다. –

+1

hmmm ... 때로는 선명도가 더 좋다고 동의하지만 - 2 대신 8 줄을 사용합니까? 그리고 제안 된 장황한 형태로도 더 분명해질 수있었습니다. 또한 비즈니스 규칙을 변경 한 상태로 유지 보수하는 데 약 4 줄이 필요합니다. 오류가 발생하기 쉽습니다. –

3
<script> 
function setFries(){ 
    var el = document.getElementById("burger"); 
    document.getElementById("opt1").disabled = document.getElementById("opt2").disabled = !e1.checked; 
</script> 

우아한 & 청소.

1
function setFries(){ 
    var el = document.getElementById("burger"); 
    document.getElementById("opt1").disabled =document.getElementById("opt2").disabled= !el.checked; 
} 

그러나 더 나은 방법은 동일한 CSS 클래스를 둘 다 할당하고 클래스를 기반으로 변경하는 것입니다. 예 :

function setFries(){ 
    var el = document.getElementById("burger");  
    document.getElementsByClassName('yourCommonClassName').disabled = !el.checked; 
} 
1

현재 if 및 else 분기에 대한 작업은 단일 명령문입니다.

if (...) { // notice the brackets 
    // action 1 
    // action 2 
} else { 
    // action 3 
    // action 4 
} 

a && b 논리 연산이다 : 이상의 액션이 조건이 참 또는 거짓 일 때 수행 할 수 있도록 블록으로 만들어 놓을 필요가있다. 당신은 그럴 필요가 없습니다.

document.getElementById("opt1").disabled = false; 
document.getElementById("opt2").disabled = false; 

마지막으로, 당신이 햄버거 하나와 함께했던 것처럼 변수의 변화에 ​​요소를 추출 할 수 있으므로 코드를 쉽게 읽을 수 있습니다 :이 작업을 실행하려면, 당신은 단순히 다른 후 그들에게 하나를 작성합니다.

전체 예 :

<script> 
function setFries(){ 
    var el = document.getElementById("burger"); 
    var opt1 = document.getElementById("opt1"); 
    var opt2 = document.getElementById("opt2"); 
    if(el.checked) { 
    opt1.disabled = false; 
    opt2.disabled = false; 
    } else { 
    opt1.disabled = true; 
    opt2.disabled = true; 
    } 
</script> 
+0

2 라이너를 갖는 것이 낫지 않습니까? –

+1

그것은 그것이 OP에서 기능에서 수행하고자하는 유일한 작업인지 여부에 따라 다릅니다. 2 개의 라이너는 변경하기가 더 어렵습니다. 어쨌든, 난 이미 당신의 솔루션을 upvoted 나는 가독성을 통해 너무 간결한 때문에. el 변수를 포기하고 one-liner로 바꾸면 Bonus potato). 편집 : 나는 terseness 좋아하지만, 분명히 그냥 배우는 사람과 그것을 사용하지 마십시오. – Tibos

+0

문제 없음 :) document.getElementById ("opt1"). disabled = document.getElementById ("opt2"). disabled =! document.getElementById ("burger"). –

관련 문제