Stack Overflow
Stack Overflow

How to make html element? Always check your form. If there is just one possible value, you shouldnt care about it at all: the program would automatically fill it up anyways, because it should not allow any other values being selected! – Rookie Oct 07 '12 at 14:32

  • There are times when the OP's request is perfectly desirable behaviour. eg. When there are normally many options available, but some combination of other selections on the form allows for only 1 specific selection. Selecting the option and disabling the control would be far superior to other javascript shenanigans. – Chris Rogers Jul 01 '15 at 23:10

    • 8 Answers8

    59

    You can keep it disabled as desired, and then remove the disabled attribute before the form is submitted.

    $('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

    Note that if you rely on this method, you'll want to disable it programmatically as well, because if JS is disabled or not supported, you'll be stuck with the disabled select.

    $(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});
    tomaroo
    • 2,524
    • 1
    • 19
    • 22
    • 1
      it seems to be the only solution. – el Dude Oct 07 '12 at 14:49
    • 1
      @EL2002 If you really aren't happy with the select behavior when it contains only one option, then the only other solution I can imagine would be to use CSS to imitate a disabled look, as Praveen suggested – tomaroo Oct 07 '12 at 14:55
    • When you have kept it disabled, users won't be able to submit the data. Is that fine with you? – Praveen Kumar Purushothaman Oct 07 '12 at 14:58
    • It is strictly against HTML standards for a disabled form field to be included upon form submission – tomaroo Oct 07 '12 at 14:59
    • @PraveenKumar The code in the submit handler above gets executed before the form is actually submitted. So by the time the form is actually submitted, the select element will no longer have the disabled attribute. Furthermore, you may add "return false;" to the submit handler to prevent actual form submission. – tomaroo Oct 07 '12 at 15:03
    • maybe it'll be better to hide "one value selects" with "display:none" and place instead a dummy "one value selects" without names and with disabled attrubute? – el Dude Oct 07 '12 at 15:18
    • 1
      @EL2002 I don't follow. The solution above should work perfectly well. – tomaroo Oct 07 '12 at 15:22
    • @tomaroo < is there a pure js solution to clear "disabled-s" in inputs without cycle? – el Dude Oct 07 '12 at 15:26
    • @EL2002 Though, you may see the select button flash from disabled to enabled real quick as the form is submitted. Setting it to display:none and using a dummy would work too, but if you're going that far you may as well just use a hidden input, as others have suggested – tomaroo Oct 07 '12 at 15:27
    • @EL2002 I'm not sure what you mean by "without cycle", but yes, you can use the code above to remove the disabled attribute from any user inputs. Just use the appropriate selector. $('input, select, textarea').removeAttr('disabled'); – tomaroo Oct 07 '12 at 15:30
    • @EL2002 `document.getElementById('yourselectid').disabled = false;` or `document.getElementById('yourselectid').removeAttribute('disabled');` – Paul Fleming Oct 08 '12 at 10:08
    • Note that this solution has no graceful degradation. If JS is disabled or unsupported, the value won't get posted. Presumably that will break your form. – Paul Fleming Oct 08 '12 at 10:10
    • @tomaroo +1 for progressive enhancement! – Paul Fleming Oct 08 '12 at 10:39
    • @flem 1. I mean, enable many inputs with one shot of code =) 2. And yes, with not enabled js it become null, thats why I thought to achieve it with dummies as described in my "22 hours ago" comment. – el Dude Oct 08 '12 at 13:26
    • This isn't a solution, but it's an alternative. – mold Jul 07 '15 at 20:47
    • If you are dead-set on keeping it disabled, you could create a hidden input on form submit and then populate it with the name and value of the select – tomaroo Jul 07 '15 at 21:56
    15
    <select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>

    or you can use jQuery

    $("#test option:not(:selected)").prop("disabled", true);
    Leniel Maccaferri
    • 100,159
    • 46
    • 371
    • 480
    dingyuchi
    • 226
    • 2
    • 4
    14

    My solution was to create a disabled class in CSS:

    .disabled {
    pointer-events: none;
    cursor: not-allowed;
}

    and then your select would be:

    <select name="sel" class="disabled">
    <option>123</option>
</select>

    The user would be unable to pick any values but the select value would still be passed on form submission.

    Denis Priebe
    • 2,640
    • 1
    • 23
    • 33
    • 1
      This way you can still navigate to the select using TAB and then change its selected option using keyboard up/down arrow keys. – vadipp Mar 15 '17 at 07:08
    • Also IE doesn't support ``pointer-events``, you still can navigate using mouse. – kxc Mar 24 '17 at 09:23
    6

    If you can supply a default value for your selects, then you can use the same approach for unchecked check boxes which requires a hidden input before the actual element, as these don't post a value if left unchecked:

    <input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

    This will actually post the value "default" (without quotes, obviously) if the select is disabled by javascript (or jQuery) or even if your code writes the html disabling the element itself with the attribute: disabled="disabled".

    Kirito
    • 307
    • 2
    • 7
    • Thinking this is a better to solution to the accepted answer.. Does anyone have any argument against that? – egmfrs Mar 08 '19 at 11:03
    3

    Add a class .disabled and use this CSS:

    ​.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}​

    Demo: http://jsfiddle.net/ZCSRq/

    Praveen Kumar Purushothaman
    • 164,888
    • 24
    • 203
    • 252
    3

    One could use an additional hidden input element with the same name and value as that of the disabled list. This will ensure that the value is passed in $_POST variables.

    Eg:

    <select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>
    user3654478
    • 67
    • 2
    1

    Wow, I had the same problem, but a line of code resolved my problem. I wrote

    $last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

    I send the form to a php script then it prints the correct value for each options while it was "null" before.

    Tell me if this works out. I wonder if this only works on mine somehow.

    user3290525
    • 695
    • 3
    • 8
    • 24
    0

    if you don't want add the attr disabled can do it programmatically

    can disable the edition into the <select class="yourClass"> element with this code:

    //bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

    if you want try it can see it here: https://jsfiddle.net/9kjqjLyq/

    Robert Blasco Villarroya
    • 884
    • 2
    • 11
    • 24