JQuery : 필수 필드에 필수 별표 추가/제거

Question

조건에 따라 트리거 된 필수 필드에 필수 별표를 추가하는 JQuery 함수 작성. 그리고이 .append 문은 효과가있을 것이라고 생각했지만 그렇지 않습니다.

JQuery와 :

이

 function checkRequiredField(){ 
       var someId = $('#Id').val(); 
       if (someId == 106587){   //value to trigger 
        $('#someNumberField').prop('required',true); 
    THIS LINE --> $('#someNumberField-label').append('<span class="required-indicator">*</span>'); 
       }else{ 
        $('#someNumberField').removeAttr('required'); 
        $('#someNumberField-label').remove('<span class="required-indicator">*</span>'); 
} 

HTML : 다음 작업 바이올린

<div class="form-group"> 
    <label id="SomeId-label" class="col-sm-2 control-label" for="SomeId">SomeId<span class="required-indicator">*</span></label> 
    <div class="col-sm-5"> 
     <g:select name="SomeId" noSelection="['null':'']" from=".." value="${106587}" class="form-control" optionKey="id" required="" aria-labelledby="SomeId-label" onchange="checkRequiredField()"/> 
    </div> 
</div> 


<div class="form-group"> 
    <div class="col-sm-2"> 
     <label id="someNumberField-label" class="toplabel" for="someNumberField">Number #</label> 
     <g:textField name="someNumberField" id="someNumberField" value="${aphis104Instance.someNumberField}" class="form-control" aria-labelledby="someNumberField-label"/> 
    </div> 
</div> 
    } 

Answer 1

는 다음과 같이 그것을 시도, 그것은 작동한다.

function checkRequiredField() { 
    var someId = $('#Id').val(); 
    if (someId == 106587) { 
     $('#someNumberField').prop('required',true); 
     // make sure its getting here... alert("test") 
     $('#someNumberField-label').append(
      $("<span>", {"class": "required-indicator"}).text("*") 
     ); 
    } else { 
     $('#someNumberField').removeAttr('required'); 
     $('#someNumberField-label span').remove(); 
    } 
} 

Answer 2

: http://jsfiddle.net/kLaaq0dc/2/

function checkRequiredField(){ 
      var someId = $('#Id').val(); 

      if (someId == 106587){   
       $('#someNumberField').prop('required',true); 
    $('#someNumberField-label').append('<span class="required-indicator">*</span>'); 
      }else{ 
       $('#someNumberField').removeAttr('required'); 
       $('#someNumberField-label span').remove(); 
    } 

}