How to make one input type disable in HTML

Question

I have a webapp, that implements CRUD functionality. The goal I'm trying to reach is to make Add editRow different from Edit. Here what I mean. When I invoke the Add function it makes a user capable(even mandatory) to provide an ID, whereas Edit disables a user of providing ID(or it would be saving a new entity, not updating). The simplest way to do that is to add "disable" for the input type. I've tried this:

<div class="form-group">
<label for="userId" class="control-label col-xs-3">ID</label>
<div class="col-xs-9">
<input type="number" class="form-control" id="userId" name="userId" 
<c:choose>
<c:when test="${user.userId== null}"> placeholder="ID" 
</c:when> 
<c:otherwise> 
placeholder = "${user.userId}" disabled </c:otherwise>
</c:choose>>
</div>
</div>

But this doesn't work. My js scripts:

function add() {
    form.find(":input").val("");
    $("#editRow").modal();
}

function updateRow(id) {
    $.get(ajaxUrl + id, function (data) {
        $.each(data, function (key, value) {
            form.find("input[name='" + key + "']").val(value);
        });
        $('#editRow').modal();
    });
}

I don't find cool creating 2 editRow's with 1 difference

egvaldes · Answer 1 · 2017-09-20T21:35:35.220

1

You just need to add the disabled property to the input you want to disable. The easiest way is to select that input outside of the each cycle and assign the property.

form.find("input[name='ID']").prop("disabled", true);

If you want to keep it all inside the cycle you can do something like this:

function updateRow(id) {
    $.get(ajaxUrl + id, function (data) {
        $.each(data, function (key, value) {
            var input = form.find("input[name='" + key + "']");
            input.val(value);
            if(key=="ID") 
                input.prop("disabled", true);
        });
        $('#editRow').modal();
    });
}

Change ID for the actual name of your input

edited Sep 20 '17 at 21:35

answered Sep 20 '17 at 20:55

egvaldes

158
3
15

This makes all the fields to be disabled, not ID only :) – Alex Sep 20 '17 at 21:06
@Alex Sorry, I read your question too fast and didn't notice it was inside a cycle for all the inputs, check my updated answer, maybe it helps. – egvaldes Sep 20 '17 at 21:36

How to make one input type disable in HTML

1 Answers1