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();
    }

}