라디오 버튼 선택에 따라 드롭 다운 메뉴 표시/숨기기 - jquery

Question

2 개의 라디오 버튼과 2 개의 드롭 다운 메뉴가있는 양식을 만들었습니다. 그러나 이제는 다른 2 개의 라디오 버튼과 2 개의 드롭 다운 메뉴 (jquery를 변경하지 않았습니다)가 추가되어 작동하지 않습니다.

내가 그것을 jsfiddle에 업로드 한 : 나는 작업 라디오 버튼과 드롭 다운 모두 JQuery와에 변경해야하는 일 http://jsfiddle.net/qbawh/

.

양식에서 수행해야 할 작업은 다음과 같습니다. '아니오'가 1 일 때 사용됩니다. 드롭 다운을 회색으로 표시하고 싶습니다. '예'를 선택하면 사용자가 드롭 다운에서 선택할 수 있습니다. 나는 양쪽 모두가 독립적으로 일하기를 바란다.

Answer 1

html에서는 라디오 버튼이 동일한 name 속성을 가질 때 그룹으로 작동합니다. 따라서 네 개의 라디오 버튼 모두에 동일한 name을 지정하면 하나의 그룹으로 설정됩니다 (4 개 중 하나를 클릭하면 이전에 선택했던 라디오 버튼이 선택 취소됩니다). 이 문제를 해결하려면 두 번째 예/아니요 버튼을 다른 것으로 변경하십시오. name. 선택한 요소의 이름이 "colour1"및 "colour2"인 경우 첫 번째 예/아니요 라디오의 이름을 "discount1"로 설정하고 두 번째 설정을 "discount2"로 바꿀 수 있습니다.

그런 다음 두 번째 라디오 그룹에 새로 추가 한 name을 사용하도록 jQuery 코드를 업데이트하십시오.

테이블에 속하지 않는 tr 및 td 요소가 있다는 점에서 귀하의 html은 유효하지 않지만 처음 두 라디오와 관련 선택 요소를 동일한 상위에 넣을 수 있다면 일반적으로 의미가 있습니다 컨테이너 (tr 또는 div 또는 무언가)를 사용하면 간단한 jQuery 코드를 작성하는 것이 더 쉬워집니다.

같은 테이블 행의 라디오 및 관련 선택이 당신의 HTML을 수정하는 경우 예를 들어, 다음 (서로 다른 그룹에있을지라도) 모든 무전기 단일 .click() 핸들러를 할당 할 수

이

$('input[name^="discount"]').click(function() { 
    $(this).closest('tr').find('select').prop('disabled', this.value=='No'); 
}); 

이 이름으로 모든 입력에 .click 핸들러를 넣어 ^= attribute starts with selector를 사용하여 동일한 상위 행에 속하는 사람을 찾기 위해 jQuery를 사용하여 동일한 테이블 행만을 선택 요소를 활성화/비활성화합니다 "discount"로 시작합니다. 클릭하면 옷장 부모 요소를 찾아 해당 행의 모든 ​​선택 요소를 가져와 사용/사용하지 않도록 설정합니다.

Answer 2

첫 번째로 두 번째 라디오 버튼 그룹의 이름을 변경해야합니다. 모두 라디오 버튼입니다. 이제 드롭 다운 :

$(document).ready(function(){ 
    $('input[type="radio"]').change(function(){ 
     if($(this).val()=='No'){ 
      if($(this).attr('name')=='discount'){ 
      $('#colour1,#shade1').attr('disabled',true); 
      } else{ 
      $('#colour2,#shade2').attr('disabled',true); 
      } 
     } else { 
      if($(this).attr('name')=='discount'){ 
      $('#colour1,#shade1').removeAttr('disabled'); 
      } else{ 
      $('#colour2,#shade2').removeAttr('disabled'); 
      } 
     } 
    }); 
}); 

HTML을 변경하지 않아도됩니다. 나쁜 영어로 죄송합니다.

Answer 3

라디오 버튼을 개별적으로 그룹화하려면 라디오 버튼에 다른 이름을 지정해야합니다. 따라서 validate 방법의 코드를 변경하십시오.

필자의 문제를 해결했습니다.

Demo