Html.DropDownList - Disabled/Readonly

user_192999 0
Viewed 214014

What option do I need to set to make a drop down box readonly when using MVCs Html.DropDownList?

I've tried things like....

Html.DropDownList("Types", Model.Types, new { _Enabled = "false" })

...and many different things along this line; alas no joy!

I thought this would be an easy.....and it probably is!

asp.net-mvc
15 Answers

I just do this and call it a day

Model.Id > -1 ? Html.EnumDropDownListFor(m => m.Property, new { disabled = "disabled" }) : Html.EnumDropDownListFor(m => m.Property)
user_66681850

You could use this approach

Disabling all the options except the selected one:

<select>
    <option disabled>1</option>
    <option disabled>2</option>
    <option selected>3</option>
</select>

This way the dropdown still submits, but the user can not select another value.

With jQuery

<script>
    $(document).ready(function () {
        $('#yourSelectId option:not(:selected)').prop("disabled", true);
    });
</script>
user_60683010

try with @disabled and jquery, in that way you can get the value on the Controller.

Html.DropDownList("Types", Model.Types, new {@class = "your_class disabled", @disabled= "disabled" })

Add a class called "disabled" so you can enabled by searching that class(in case of multiples disabled fields), then you can use a "setTimeout" in case of not entering controller by validation attributes

<script>

  function clickSubmit() {
    $("select.disabled").attr("disabled", false);
    setTimeout(function () {
        $("select.disabled").attr("disabled", true);
    }, 500);
  }
</script>

submit button like this.

 <button type="submit" value="Submit" onclick="clickSubmit();">Save</button>

in case of inputs, just use @readonly="readonly"

@Html.TextBoxFor("Types",Model.Types, new { @class = "form-control", @readonly= "readonly" })
user_139395540

You can set the select as readonly and then run some jquery to disable the options except the selected value. You cant change the value and it's included when the form is submitted.

$(document).ready(function () {
    $('select option').removeAttr('disabled');
    $('#readonlyTest').find('select[readonly] option').not('select[readonly] option[selected]').attr('disabled', 'disabled');
});

$('#submitButton').click(function(e) {
    var formData = $('form').serialize();
  $('#formData').html(formData);
});
body {
  margin: 50px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="scopeReadonlyNoJs">Scope Readonly No Js</label>
    <select class="form-control" id="scopeReadonlyNoJs" name="scopeReadonlyNoJs" readonly="readonly">
      <option value="">Select..</option>
      <option selected="selected" value="readonlyNoJsScopeValue1">Scope Value 1</option>
      <option value="readonlyNoJsScopeValue2">Scope Value 2</option>
    </select>
    <small id="scopeReadonlyNoJsHelp" class="form-text text-muted">This is read only and no js is applied. It looks disabled but you can change the values.</small>
  </div>
  <div id="readonlyTest" class="form-group">
    <label for="scopeReadonly">Scope Readonly</label>
    <select class="form-control" id="scopeReadonly" name="scopeReadonly" readonly="readonly">
      <option value="">Select..</option>
      <option selected="selected" value="readonlyScopeValue1">Scope Value 1</option>
      <option value="readonlyScopeValue2">Scope Value 2</option>
    </select>
    <small id="scopeReadonlyHelp" class="form-text text-muted">This is read only and is disabled via js by disabling the options except the selected one.</small>
  </div>
  <div class="form-group">
    <label for="scopeDisabled">Scope Disabled</label>
    <select class="form-control" id="scopeDisabled" name="scopeDisabled" disabled="disabled">
      <option value="">Select..</option>
      <option selected="selected" value="disabledScopeValue1">Scope Value 1</option>
      <option value="disabledScopeValue2">Scope Value 2</option>
    </select>
    <small id="scopeDisabledHelp" class="form-text text-muted">This is disabled and wont be posted.</small>
  </div>
  <button id="submitButton" type="button">
    Submit
  </button>
</form>
<p id="formData">
</p>

user_44964400
Related