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

}

JQuery：将所需的星号附加/删除到必填字段

2 个答案: