요소 이름의 색인을 기준으로 요소 선택

안녕하십니까. 번호가 매겨진 섹션으로 나뉘어 진 형식이 있습니다. 때로는 섹션 번호를 사용하여 이러한 섹션 중 일부를 비활성화해야합니다. 함수가 섹션 번호 배열을 받으면 하나씩 루프를 실행하여 하나씩 수집합니다. jQuery를 사용하여 섹션 번호별로 번호 매겨진 섹션을 수집하는 더 효율적이고 효과적인 방법이 있습니까?요소 이름의 색인을 기준으로 요소 선택

HTML :

<div id="frameContent"> 
<div id="section1"> 
    <select> 
     <option value="1" selected="selected">empty (default)</option> 
     <option value="2" selected="selected">foo</option> 
     <option value="3" selected="selected">bar</option> 
    </select> 
</div> 
<div id="section2"> 
    <select> 
     <option value="1" selected="selected">empty (default)</option> 
     <option value="2" selected="selected">foo</option> 
     <option value="3" selected="selected">bar</option> 
    </select> 
</div> 
<div id="section3"><select> 
    <option value="1" selected="selected">empty (default)</option> 
    <option value="2" selected="selected">foo</option> 
    <option value="3" selected="selected">bar</option> 
</select></div> 
<div id="section4"> 
    <select> 
     <option value="1" selected="selected">empty (default)</option> 
     <option value="2" selected="selected">foo</option> 
     <option value="3" selected="selected">bar</option> 
    </select> 
</div> 
</div>

JS :

var toggleFormSections = function(frameContent, sectionNumbers, enable) { 

    // init empty selector 
    var sections = $(); 

    // collect sections 
    for(var i = 0; i < sectionNumbers.length; i++) { 
     var section = frameContent.find('div#section' + sectionNumbers[i]); 
     sections = sections.add(section); 
    } 

    // disable/enable sections and elements within 
    if(sections.length > 0) { 
     if(enable) { 
      sections.find('select').prop('disabled', false); 
     } else { 
      sections.find('select').prop('disabled', 'disabled'); 
     } 
    } 
} 

// usage: 
var frameContent = $('#frameContent'); 
toggleFormSections(frameContent, [2,3], false);

링크

출처

2013-07-29 DeadMoroz

http://jsfiddle.net/XZ9fT/3/

쉽게 jQuery의 each 루프 인덱스 요소를 통해, 필요를 사용할 수 없습니다에 FIDDLE에 그것의 길이를 확인하십시오. 나는 확실히 확신하지 못한다. 왜 당신은 enabled 플래그를 원한다. 빈 배열로 호출하면 모든 것을 가능하게 할 수 있습니다. 이것은 그것을 더 짧게 만들 것입니다. 될 것입니다

$.each(sectionNumbers, function(i) { 
    if(enable) { 
    frameContent.find('div#section' + sectionNumbers[i] + ' select').prop('disabled', false) 
    } else { 
    frameContent.find('div#section' + sectionNumbers[i] + ' select').prop('disabled', 'disabled'); 
    } 
});

출처

2013-07-29 08:39:22 DrColossos

이것은 거의 완벽한 : 하나의 숫자 대신 배열은 무엇 sectionNumbers 경우입니까? 이전에 비활성화 된 섹션이나 기본적으로 비활성화 된 섹션 중 일부를 활성화하기 위해 enable 플래그를 사용하고 있습니다. – DeadMoroz

숫자 배열 (또는 빈 배열)에서만 작동합니다. 배열에 있는지 확인하기 위해 변수에 검사를 추가 할 수 있습니다. – DrColossos

한 가지 방법

var toggleFormSections = function(frameContent, sectionNumbers, enable) { 
    // init empty selector 
    var sections = []; 

    // collect sections 
    for(var i = 0; i < sectionNumbers.length; i++) { 
     sections.push('#section' + sectionNumbers[i]); 
    } 
    sections = $(sections.join(', ')) 

    sections.find('select').prop('disabled', !enable); 
}

데모 : Fiddle

출처

2013-07-29 08:40:12

요소 이름의 색인을 기준으로 요소 선택

답변

관련 문제