How to Greyout a Disabled Field

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 to data-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



Leave a reply



Submit