how can I greyout a disabled field?
The JSF input component's disabled
attribute doesn't emit a style class like class="disabled"
or something like as your CSS declaration seems to expect. It just sets the HTML-standard disabled
attribute on the generated HTML element. To see it with your own eyes, open the JSF page in your favourite browser, rightclick and View Source. It'll look something like
<input type="text" disabled="disabled" />
You need to use the CSS attribute selector element[attrname]
. If the attribute with attrname
is present on the element
, then the style will be applied.
#content input[disabled] {
color: #DCDAD1;
padding: 2px;
margin: 0 0 0 0;
background-image: none;
}
(please note that I fixed the background-image
declaration as well as it was invalid)
How to disable input but not get the greyed out tone on the text?
You can style it as you like using the :disabled
selector:
jQuery('#displayName').val("sampleText");
#displayName:disabled { background: white; color: black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="form-group"> <label for="displayName" style="margin-right:15px;">Namn</label> <input type="text" class="form-control" id="displayName" disabled value=""></div>
How to make a greyed-out HTML form?
The disabled="disabled" parameter is the standard way to do this, and you could use something like jQuery to dynamically disable all of the form elements contained in a fieldset (Which is the standard way of grouping related form elements) on the fly.
Alternatively you could place a partially transparent div on top of the fieldset. This will also provide some blocking of the form elements from mouse clicks, but will not protect against tabbing to them. You should still disable the form elements themselves.
Don't grey out Disabled Input in React Native Elements
I first read the official API and find the disabledInputStyle, then I look at the Input source in react-naive-element.
...
Input.defaultProps = {
InputComponent: TextInput,
};
...
// here find it defalut use textinput in react-native,and when disable true,use the disalbeInputStyle
render(){
<View style={StyleSheet.flatten([styles.container, containerStyle])}>
....
<InputComponent
testID="RNE__Input__text-input"
underlineColorAndroid="transparent"
editable={!disabled}
{...patchWebProps(attributes)}
ref={ref => {
this.input = ref;
}}
style={StyleSheet.flatten([
styles.input,
inputStyle,
disabled && styles.disabledInput,
disabled && disabledInputStyle,
])}
/>
...
</View>
}
For the TextInput in react-native, we set the text color used color style
so you can try to do use disabledInputStyle, and set the color you want.
<Input
disabled={true}
value={"ddd"}
disabledInputStyle={{color:'red',opacity:1}} //chanage which color you want
placeholder='INPUT WITH ERROR MESSAGE'
errorStyle={{ color: 'red' }}
errorMessage='ENTER A VALID ERROR HERE'
/>
How to Remove disable attribute from a button after input validation?
- You can give the inputs a default attribute like
data-valid="false"
. - When a field is blurred, you can change the attribute's value to true after successfully validating it.
- You can then enable the button if all the
data-valid="false"
are changed todata-valid="true"
Try this
$("input").blur(function() {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
$(this).attr('data-valid', 'false');
} else {
$(this).removeClass("raise-error");
$(this).attr('data-valid', 'true');
}
$('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled');
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error+.error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-container">
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" data-valid="false" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
</div>
How can I enable / disable form fields from within the form tag?
In your case window.check is ambiguous - it could be window.check the function or window.check the field with id="check"
Try to never reuse function, var an element names/IDs
To dix your immediate issue, just rename and pass the checkbox
function checkIt(theCheck) {
const c = theCheck.checked
document.getElementById("text").disabled = c;
}
<form id='form'>
<input type='checkbox' id='check' onchange='checkIt(this)' checked />
<input type='text' id='text' disabled />
</form>
Related Topics
Using Proper CSS Media Queries in Angular
How to "Snap to Pixel" After a CSS Translate
Different Levels of CSS and The Priority Over Each Other
Best Unit for Font-Sizes in CSS
Why Can't I Decrease The Line-Height of This Text
How to Style Form Drop Down Lists
Inner Div Locked to Lower Right Hand Corner of Outer Div
CSS Width 100% Including Overflow
Sourcemaps with Webpack CSS-Loader
Transition Only for The Border on Hover, But Not for Background
Twitter Bootstrap - Position Issue with Row-Fluid
CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue
Wordpress Will Only Fully Load on Localhost
How to Add Multiple Style Attributes to a React Element