라디오가 선택된 경우 텍스트 상자 숨기기

내 사이트에 여러 확인란, 두 개의 라디오 버튼 및 텍스트 필드가있는 데이터 입력 양식이 있습니다. 내 라디오 버튼 중 하나를 선택하면 텍스트 필드를 편집 할 수 없게 만들고 싶습니다. 고객이 입력하려고하면 오류 메시지가 표시됩니다. 나는 Jquery와 웹 코딩에 익숙하지 않아서 관련 답변을 찾는 데 어려움을 겪고있다.라디오가 선택된 경우 텍스트 상자 숨기기

라디오 버튼과 텍스트 영역에있는 고객이 나는 그들이은을 선택하면 내가 원하는 텍스트 필드를 사용할 수없는 원하는 브론즈 (기본값)에있는 라디오 버튼을 떠나면

<form method="post" class="required-form" action="php/addcompanyengine.php"> 
    <ul class="forms"> 


    <p class="Region">Please select the type of listing you desire</p> 
    <ol> 
     <li><label class="checkbox">Bronze Listing</label> 
     <input type="radio" name="listing[]" id="listing" value="Bronze" checked></li> 
     </ol> 
     <ol> 
     <li><label class="checkbox">Silver Listing</label> 
     <input type="radio" name="listing[]" id="listing" value="Silver"></li> 
    </ol> 



     <label for="Description">Description:<br /><br /> 
      (Silver listings only <br /> <br /> 
      Maximum 400 characters)</label> 
      <textarea name="Description" cols="20" id="Description" maxlength="400" ></textarea>

기본적으로 다음과 같이 그들이 입력 할 수 있습니다.

많은 감사의 말씀을드립니다.

<ol> 
    <li><label class="checkbox">Bronze Listing</label> 
    <input type="radio" name="listing[]" class="listing" value="Bronze" checked></li> 
    </ol> 
    <ol> 
    <li><label class="checkbox">Silver Listing</label> 
    <input type="radio" name="listing[]" class="listing" value="Silver"></li> 
</ol> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.listing').change({ 
      if ($(this).val() == 'Bronze') { 
       $('#Description').attr('readonly','readonly'); 
      } else { 
       $('#Description').removeAttr('readonly'); 
      } 
     }); 
    }); 
</script>

당신이있어 행동에서 볼 수 있습니다 :

출처

2012-09-19 user1682939

후

<script type="text/javascript"> $(document).ready(function() { $('.listing').change(function() { if ($(this).val() == 'Bronze') { $('#Description').attr('readonly','readonly'); } else { $('#Description').removeAttr('readonly'); } }); }); </script>

주 기능()해야한다 생각한다. CSS 스타일을 사용하려면 클래스를 사용해야합니다. – Liam

defaul을 사용하여 텍스트 필드를 비활성화하고 라디오 변경시 텍스트 필드를 활성화 할 수 있습니다. – dsa

이미 jQuery를이 (노트 대신 ID의 클래스 속성)로드가 가정 http://jsfiddle.net/AZ7wJ/

당신은 텍스트 영역은 원래 비합니다 편집 가능하면 readonly="readonly" 속성을 추가 할 수 있습니다.

출처

2012-09-19 14:09:04 manavo

Brilliant는 훌륭하게 작동합니다. 감사! – user1682939

시작하기 전에 :

변화가 다른 input ID가되도록 라디오.
textarea에 readonly 속성을 추가하십시오.

의 당신이 청동 라디오 input id로 listingBronze를 사용하는 가정 해 봅시다.

//we listen to the change event 
$("#listingBronze").change(function(event){ 
    //we tell readonly is equal to bronze checked status 
    $('#Description').prop('readonly',(!!$(this).prop("checked"))); 
});

간단합니다. readonly = checked으로 코드가 실제로 작아집니다.

참고 : 사용! 값이 아닌 값이므로 부울 값이 될 것입니다.

선택적으로 당신은 hide 및 show 텍스트 영역, 그 과정에서 readonly 속성 폐기 수 :

$("#listingBronze").change(function(event){ 
    $('#Description').show(); 
    if(!!$(this).prop("checked")) $('#Description').hide(); 
});

우리는 모든 변화에 대한 텍스트 영역을 표시를 한 다음 checked 속성을 확인하고 true의 경우 숨 깁니다.

출처

2012-09-19 14:17:55 SparK

내가 허용 대답 당신은 동일한 ID를 사용하여 페이지에 두 가지 요소가 없어야 변화

출처

2014-08-22 10:08:35 user1458474

라디오가 선택된 경우 텍스트 상자 숨기기

답변

관련 문제