4

I would like simulate input disabled. I would like don't have change value in input, but this value should be send with POST with FORM.

<input class="dis" type="text" disabled="disabled" value="111">
<input class="no" type="text">
<input class="dis" type="text" disabled="disabled" value="333">

​ http://jsfiddle.net/hC4WP/

I can use also CSS and jQuery, but how?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Ron Forzestering
  • 87
  • 2
  • 5
  • 3
    Mark the field as `readonly`. – Felix Kling Apr 19 '12 at 10:29
  • possible duplicate of [submit disabled fields](http://stackoverflow.com/questions/1284464/submit-disabled-fields) – Felix Kling Apr 19 '12 at 10:31
  • I know this is an old thread but... Attribute `readonly` allows you to modify it. You should do something like this: https://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input – Sonhja Sep 21 '17 at 13:50

3 Answers3

11

Use readonly instead of disabled

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
11

Use the readonly attribute instead of disabled.

However, this will not result in the field being grayed out. To achieve this, use the following CSS:

input[readonly] { color: #aaa; }

(you might have to change the color a bit to look more like the original disabled color)

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • I know this is an old thread but... Attribute `readonly` allows you to modify it. You should do something like this: https://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input – Sonhja Sep 21 '17 at 13:50
0

Solution with tabindex.

Create a .disabled class.

CSS:

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

JS:

$(".disabled").attr("tabindex", "-1");

HTML:

<input type="text" class="disabled" />
jBelanger
  • 1,526
  • 18
  • 11
  • what about the not allowed icon? – Malin Sep 25 '18 at 16:44
  • 1
    "cursor: not-allowed" would not work here because "pointer-events:none" disables cursor events. This means the cursor won't change when hovering inputs. I believe you could add the "cursor" property to a parent element to achieve the same result though. – jBelanger Oct 02 '18 at 11:42