자바스크립트 문제 좀 도와주세요 ㅠㅜ
본문
현재 http://styttl78.maru.net/index2.html 여기 보시면 콘트롤하는 SELECTBOX가 두개가 있을시 하나는 큰UL을 담당하고 하나는 그 UL안의 li input를 각각 담당하는 selectbox가 존재합니다.
하나를 disabled하면 하나가 안먹히고;; 큰selecbox에서 작은 selectbox를 컨트롤 하자니 아무리 해봐도 답이 안나오네요 ㅠㅠ 도와주세요 ~~ ㅠㅠ
말그대로 한개의 셀렉트박스는 ul li안에 있는 inputbox를 disabled시키는거구요 또 하나의 selectbox는 한 ul전체를 disabled시켜서 각 ul input를 활성 또는 비활성되게 하면 되는겁니다..
아~~ 너무 복잡하네요 ㅠㅠ
답변 3
정확한 요구 내용을 이해를 못하겠어요...
좀더 상세히 전체적인 내용을 알려주시면 추가 답변 드리겠습니다.
<script type="text/javascript">
jQuery(function($){
$('select').change(function(){
var idx = $(this).attr('data-idx');
var val = $('option:selected',this).val();
$('ul[data-contents]').each(function(){
var cNum = $(this).attr('data-contents');
if(cNum == idx){
$('input',this).prop('disabled',false);
}else{
$('input',this).prop('disabled',true);
}
});
});
});
</script>
콘텐츠01
<select data-idx="1">
<option value="1">콘텐츠01 제어1</option>
<option value="2">콘텐츠01 제어2</option>
<option value="3">콘텐츠01 제어3</option>
</select>
콘텐츠02
<select data-idx="2">
<option value="1">콘텐츠02 제어1</option>
<option value="2">콘텐츠02 제어2</option>
</select>
<br />
<h3>콘텐츠01</h3>
<ul data-contents="1">
<li>
<input type="text" size="10" value="콘텐츠01 빵" readonly />
<input type="text" size="10" value="콘텐츠01 아이스크림" readonly disabled />
<input type="text" size="10" value="콘텐츠01 쥬스" readonly disabled /> 원)
</li>
<li>
<input type="text" size="10" value="콘텐츠02 빵" readonly disabled />
<input type="text" size="10" value="콘텐츠02 아이스크림" readonly disabled />
<input type="text" size="10" value="콘텐츠02 쥬스" readonly disabled /> 원)
</li>
<li>
<input type="text" size="10" value="콘텐츠03 빵" readonly disabled />
<input type="text" size="10" value="콘텐츠03 아이스크림" readonly disabled />
<input type="text" size="10" value="콘텐츠03 쥬스" readonly disabled /> 원)
</li>
</ul>
<h3>콘텐츠02</h3>
<ul data-contents="2">
<li>
<input type="text" size="10" value="콘텐츠01 케익" readonly disabled />
<input type="text" size="10" value="콘텐츠01 과자" readonly disabled />
<input type="text" size="10" value="콘텐츠01 팥빙수" readonly disabled /> 원)
</li>
<li>
<input type="text" size="10" value="콘텐츠02 케익" readonly disabled />
<input type="text" size="10" value="콘텐츠02 과자" readonly disabled />
<input type="text" size="10" value="콘텐츠02 팥빙수" readonly disabled /> 원)
</li>
<li>
<input type="text" size="10" value="콘텐츠03 케익" readonly disabled />
<input type="text" size="10" value="콘텐츠03 과자" readonly disabled />
<input type="text" size="10" value="콘텐츠03 팥빙수" readonly disabled /> 원)
</li>
</ul>
</div>
지금 보신대로 selectbox가 두개가 있구요 밑에 ul li로 구성된 내용(input)가 두개입니다.콘텐츠1, 콘텐츠2 이게 바로 ul li로 구성된 각각 콘텐츠라고 보시면 됩니다.
selectbox 우측 두번째건 이 ul li 두개를 크게 활성, 비활성 시킨다고 보시면 되시구요 선택된 활성쪽에 첫번째selectbox메뉴선택시 ul li 안의 각각 inputbox들이 활성 또는 비활성이 된다고 보시면 됩니다. 제가 질문에 달려있는 주소로 가시면 이미지로 간략하게 설명한것을 참고로 보시면 이해가 되실까요?
한마디로 selectbox 한개는 ul li안에있는 inputbox를 활성/비활성하는것이고 두번째 selectbox는 두번째 ul li로 넘어가서 첫번째 selectbox로 활성/비활성 할수있게 하는것이 현재 저의 문제입니다. ㅜㅜ
이거면 될까요 ?
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var contantsType = 1;
var contantsRows = 1;
var contantsCols = 1;
function dataSet(){
$('ul[data-contents]').each(function(i){
if((i+1) == contantsType){
$('li',this).each(function(ii){
if((ii+1) == contantsRows){
$('input',this).each(function(iii){
if((iii+1) == contantsCols){
$(this).prop('disabled', false);
}else{
$(this).prop('disabled', true);
}
});
}else{
$('input',this).prop('disabled', true);
}
});
}else
$('input',this).prop('disabled', true);
});
}
jQuery(function($){
/* Init */
contantsCols = $('input[name=yakjung]:checked').val();
contantsRows = $('select[data-select=1] option:selected').val();
contantsType = $('select[data-select=2] option:selected').val();
dataSet();
$('input[name=yakjung]').change(function(){
var idx = $('input[name=yakjung]:checked').val();
contantsCols = idx;
dataSet();
});
$('select[data-select=1]').change(function(){
contantsRows = $('option:selected',this).val();
dataSet();
});
$('select[data-select=2]').change(function(){
contantsType = $('option:selected',this).val();
dataSet();
});
});
</script>
<form name="fitem" method="post" enctype="MULTIPART/FORM-DATA" action="" onsubmit="return fitem_submit(this);">
<!-- Cols Controller -->
<label>
<input type="radio" name="yakjung" value="1" class="yakjung" checked >
제품1
</label>
<label>
<input type="radio" name="yakjung" value="2" class="yakjung" >
제품2
</label>
<label>
<input type="radio" name="yakjung" value="3" class="yakjung" >
제품3
</label>
<br />
<!-- Rows Controller -->
콘텐츠01
<select name="it_calling" data-select="1" >
<option value="1">콘텐츠01 제어1</option>
<option value="2">콘텐츠01 제어2</option>
<option value="3">콘텐츠01 제어3</option>
</select>
<!-- Type Controller -->
콘텐츠02
<select name="it_bandtype1" data-select="2" >
<option value="1">콘텐츠02 제어1</option>
<option value="2">콘텐츠02 제어2</option>
</select>
<br />
<h3>콘텐츠01</h3>
<ul class="u2" data-contents="1">
<li>
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠01 빵" readonly />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠01 아이스크림" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠01 쥬스" readonly disabled /> 원)
</li>
<li>
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠02 빵" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠02 아이스크림" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠02 쥬스" readonly disabled /> 원)
</li>
<li>
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠03 빵" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠03 아이스크림" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠03 쥬스" readonly disabled /> 원)
</li>
</ul>
<h3>콘텐츠02</h3>
<ul class="u3" data-contents="2">
<li>
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠01 케익" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠01 과자" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠01 팥빙수" readonly disabled /> 원)
</li>
<li>
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠02 케익" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠02 과자" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠02 팥빙수" readonly disabled /> 원)
</li>
<li>
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠03 케익" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠03 과자" readonly disabled />
<input type="text" name="ct_monthly[]" size="10" class="support_input20" value="콘텐츠03 팥빙수" readonly disabled /> 원)
</li>
</ul>
</div>
</form>
헉 깜봉님 제가 못했던게 이거였어요 ㅠㅠ 아~ 디자인출신이라 플그램 공부중인데 기본만 이제 조금씩 알아가다보니 막히면 물어볼때가 여기밖에 없네요 ㅠㅠ 깜봉님덕분에 도움이 정말 많이 됩니다. 이번에 많은 공부가 되고있어요~~ 정말 감사드립니다.^ㅇ^
도움이 되셧다니 다행입니다 ^^
깝봉님 죄송한데 하나만 더 여쭤봐두 될까요?
http://styttl78.maru.net/index2.html
여기서 선택3번째로 checkbox를 하나 추가했는데 이 checkbox는 selectbox2번째와 마찮가지로
data-contents="3" 이렇게 넘어갈려고 합니다.
스크립트를 추가해서 해보는데 자꾸 두개중 하나가 작동을 안하거나 또 다르게 하면 전체 작동이 안되네요 ㅠㅠ
지금 하시는게 그냥 단순히 공부만으로 시도해보시는거죠 ? 동일한 내용을 어딘가 적용하려고 하시는 거라면 전체적인 완성형을 설명해주시면 좀더 확실 하게 소스를 짜서 알려드릴 수 있는데...
우선 제가 짜드린 소스는 rows/cols 기준으로 만들어 드린것이라 기본 attibute 만 이해하시면 var contantsBuga = 1; 이런거 추가 안하셔도 동일하게 동작합니다.
/* 수정 전 */
<input type="checkbox" name="chek" value="1" id="chek01" onclick="show3();">
/* 수정 후 */
<input type="checkbox" name="chek" value="3" >
/* 수정 전 */
$('input[name=chek]').change(function(){
var idx = $('input[name=chek]:checked').val();
contantsBuga = idx;
dataSet();
});
/* 수정 후 */
$('input[name=chek]').change(function(){
var idx = $('input[name=chek]:checked').val();
contantsType = idx;
dataSet();
});
추가적으로 말씀 드리자면 id 속성은 필요할때 아니면 안넣으셔도 됩니다... 모든 필드에 아이디를 필수 적으로 넣으시는거 같아서 말씀 드려요....
필요할때 :: 개체에 이벤트나 속성(CSS포함)을 부여 할때
요즘 제이쿼리와 자바스크립트 공부중인데 제가 공부한다고 참고사이트에 있는 소스로 연구하면서 공부하고있습니다. 책만 보면서 하니까 한계가 있더라구요. 그래서 나름 응용해서 이렇게도 만들어 보고 저렇게도 만들어보고 그렇게 만든걸 자료로 남겨뒀다가 비슷한게 나중에 적용할 상황이 있으면 다시보고 참고할려구요.. 그래도 요 몇달간 재미도 있고 도움도 조금씩 받으면서 하니까 많이 이해하는데 참고가 되고있습니다^^
jQuery 는 selectors 만 이해하셔도 반은 가셧다고 봅니다.
selectors 는 css 기반을 둔것이니, 크게 도움 되실거에요
참조 : http://www.w3schools.com/cssref/css_selectors.asp (영문)
참조2 : http://blog.naver.com/akohong/220794167058 (누군가의 한글 번역)
selectors :: 지정한 대상 예: $('#test') - id="test"
지금 사용하신 예시는 복잡성을 띠고있기 때문에 셀렉터의 역할이 중요했습니다.
셀렉터를 못잡으면 동작하지 않는 다는 것이기도 합니다.
와~~ 깜봉님 이렇게 좀더 알기쉽게 예문까지 알려주시니 너무너무 감사드려요~~^ㅇ^
현재 셀렉트박스와 라디오버튼, 체크박스 가능한한 모든 연동되는 부분을 다 해보려고 계속 공부중입니다~~ 체크박스를 선택하고 두번째 셀렉트 박스를 선택했을시 또다른 ul li가 선택되는 그런 작업을 진행해보려구요.. 그런데 현재 체크박스를 선택했을시 제일 마지만 ul이 되는 콘텐츠04로 보내져야 하는데 그게 잘 안되고 있네요 가능한한 contantsType이걸 같이 쓰기보단 별도의 contantsBuga라는 임의여 네임을 줘서 또다른 ul li가 있을시 체크박스와 연관되는 이동명령을 주려고 합니다. 말그대로 콘텐츠02번 selectbox처럼이요 그리고 그다음이 콘텐츠02 selectbox와 체크박스를 같이 선택시 지금은 없지만 콘텐츠05번이라는 ul li부분으로 보내지도록 만들려구요.. 제 생각대로라면 이런것만 다 만들어진다면 실 홈페이지 제작할때 selectbox와 checkbox 그리고 radio에 관련된 disabled는 거진 다 된다고 보여집니다. 이것만 제대로 만들어두면 정말 이만한 좋은 자료는 없을것 같아 제가 현재 해보려 공부중에 중요시 여기는 부분이구요^^
현재 깜봉님이 알려주신걸 토대로 우측에 또다른 div로 하나 더 추가해서 좌측/우측 선택하면 disabled될수 있도록 구현해 보았습니다. 방법이 맞는진 잘 모르겠으나 현재 보여지는 부분은 만족스럽게 잘 되는걸로 보여집니다.. 흐흐흐...
http://styttl78.maru.net/index2.html
의도는 이해했습니다....
그런데 사실 이 코딩에서 배우실 부분이라함은... 제가 보기엔...
$('selector').prop('disabled', true|false); 부분이라는 것을 강조 드리고 싶습니다.
그리고 원하시는 형태를 만들어 드리기위해
contants~ 형태의 변수를 이용해 보았을뿐... 실질적으로는 저렇게 까지 쓰는일은 없습니다 (경험상/스타일일뿐 이렇게 쓰시는분이 분명 있을겁니다.).
복합적으로 selector,input[type] 등을 여러가지 형태로 이용하셧지만 결론은 selector 의 역활만으로 컨트롤 되는 것 뿐이라.
이부분만 이해하시면 자유롭게 컨트롤 가능하실 것 으로 보입니다.
샘플이 오류인것을 보이긴 하지만 ....
자야하는 시간이라... 소스로는 제공해 드리긴 뭣하고.... (완성형을 원하시면 딱 맞춰서 보여드리겟는데... 완성형은 없을 것 같고... 공부라고 하시니.. 계속 이런저런 시도를 하실 것 같아서... 제가 봐도 복잡해서 정리하려면 시간이 좀걸리는 관계로 이만 Zzzzz...)
결론은 다양한 방향으로 시도해보시는 것은 좋으나 일부러 복잡하게 하실 필요는 없을 것 같다는 거에요.
왜냐면... 제가 강조 드린부분 prop 속성 제어 + selector 만 숙지 하시면 컨트롤 안되는 폼필드는 없을 것 입니다.
