如何根据用户所做的选择将只读下拉列表/文本框更改为读/写？

Question

It will have one text box (txtGRC) which will be read/write no matter what.

However, I would like to have the rest of the boxes greyed out until an input has been made into txtGRC.

My problem is a bit more complicated than this but once this has been solved I believe that I can take over the rest. It's funny, I could do this easily on VB.

Here is the code for the container:

<content id="GenerateReportContent" class="col-md-4">
    <form id="GenerateReportContainer">
        <div class="AltFunctions">
            <ul>
                <li>
                    <a href="#" class="AltButton" id="altClearButton">Clear</a>
                </li>
                <li>
                    <a href="#" class="AltButton" id="GRaltInfoButton">Info</a>
                </li>
            </ul>
        </div>
        <h1 id="GenerateReportHeader">GENERATE REPORT</h1>
        <input type="text" id="txtGRC" class="form-control" placeholder="Enter Specific Claim Number...." >
        <p id="txtOptional">(optional)</p>
        <select id="GRDropDown">
            <option value="SelectReport">Select Report</option>
        </select>
        <br />

        <select id="GRDropDown">
            <option value="SelectSupplierName" disabled="disabled">Select Supplier Name</option>
        </select>
        <br />
        <select id="GRDropDown">
            <option value="SelectReviewPeriod" disabled="disabled">Select Review Period</option>
        </select>
        <div class="form-group">
            <input type="text" id="txtGRC" class="form-control" placeholder="Month Code..." disabled="disabled">
            <p id="txtOptional">(optional)</p>

        </div>
        <button type="submit" id="GenerateReportButton" class="btn btn-default">GO</button>
    </form>
</content>

If you need more information just place a comment and I will do what I can. Thank you in advance.

Answer 1

With javascript / jQuery, you will have to handle a keypress on that textbox, and if the length of the value of the textbox is bigger than 0, or the length you want, then, foreach other input disabled, you will enable it.

An example:

$(".txtGRC").keyup(function() {
    if( $(this).length > 0 ) {
        $("input.disabled").each(function() {
            $(this).prop("disabled", false);
        });
    }
    else {
        $("input.disabled").each(function() {
            $(this).prop("disabled", true);
        });
    }
});

So basically the code above (with jQuery) checks whenever the user release the key pressed and calculates the length of the textarea, if this is bigger than 0, it enables de inputs with the class ".disabled" (here you should put the inputs that starts disabled), otherwise, it disables them.

Answer 2

First, the "disabled" attribute should be applied to the "select" tag not "option".

<select id="GRDropDown" disabled>

Now, for your "txtGRC" field, you have three attributes to choose from (as event handlers):

• oninput
• onpaste
• onkeydown

depending on the browser the client will be using.

<input type="text" id="txtGRC" class="form-control" placeholder="Enter Specific Claim Number...." onkeydown="valueChanged()">

Finally, add the javascript function to disable/enable "GRDropDown" dropdowns:

<script>
    function valueChanged() {
        var val = document.getElementById("txtGRC").value;
        var dd = document.getElementById("GRDropDown");
        if(val.length>0) dd.disabled=false;
        else dd.disabled = true;
    }
</script>

If you have jQuery previously included in your code, the solution would be simpler.