JavaScript Remove "Disabled" Attribute from HTML Input

javascript remove disabled attribute from html input

Set the element's disabled property to false:

document.getElementById('my-input-id').disabled = false;

If you're using jQuery, the equivalent would be:

$('#my-input-id').prop('disabled', false);

For several input fields, you may access them by class instead:

var inputs = document.getElementsByClassName('my-input-class');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = false;
}

Where document could be replaced with a form, for instance, to find only the elements inside that form. You could also use getElementsByTagName('input') to get all input elements. In your for iteration, you'd then have to check that inputs[i].type == 'text'.

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>

remove disabled attribute according input value

there were some flaws in your code,

1 you are sending this.value here as a string onblur='chk(this.value,'"+par+"')

2 in this onblur function call there is a problem while sending par as a parameter,

so here I Modified your code a bit and now this is working

function add_option(){    var tot_option=parseInt($('.totalOption').length);    tot_option++;    $('#tot_option').val(tot_option);    var par="'radio"+tot_option+"'";    var onBlur = 'onblur=chk('+ par.toString() +')';    var opt="<input type='text' id='opt"+tot_option+"' class='totalOption' " + onBlur + " name='answers[]' style='width:80%;' onfocus='add_option()'> <input type='radio' id='radio"+tot_option+"' required disabled name='canswer' value='"+tot_option+"'><br><br>";    document.querySelectorAll("input[onfocus]").forEach(function(element, index) {            element.removeAttribute("onfocus");    });    $('#new_option').append(opt);}function chk(rad){    if(event.relatedTarget == null)        return;    var SelctedTarget = Number(event.relatedTarget.id[event.relatedTarget.id.length - 1]) - 1;    var ivalue = $('#opt' + SelctedTarget).val();    if(ivalue!=''){        $('#'+rad).removeAttr('disabled');    }else{        $('#'+rad).attr('disabled','disabled');        $('#'+rad).removeAttr('checked','checked');    }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" style='width:80%;' onblur="chk('radio1')" id="opt1" class="totalOption" name="answers[]"><input type="radio" id="radio1" disabled required name="canswer" value="1"><br><br><input type="text" id="opt2" class="totalOption" onblur="chk('radio2')" style='width:80%;' name="answers[]" onfocus="add_option()"><input type="radio" id="radio2" required disabled name="canswer" value="2"><br><br><span id="new_option"></span>

how to remove disabled attribute once other input field filled with at least 6 characters

A different approach with an eventListener:

document.getElementById('enabled').addEventListener('keyup', function() {  if (this.value.length >= 6) {    document.getElementById('disabled').disabled = false;  } else {    document.getElementById('disabled').disabled = true;  }});
<input type="text" id="enabled" placeholder="Type here..."><input type="text" id="disabled" disabled>

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>

Check if all inputs are filled in to remove disabled attribute

Logic is a bit backwards. You want to filter all the inputs inside change of each. Your current code only filters the one that changed

var $inputs = $(".follow-url-inputs").change(function() {

  var inValid = $inputs.filter(function() {
    return !this.value.trim();
  }).length;

  $('.fs_btn-save').prop('disabled', inValid)

  if (!inValid) {
    console.log("all fiels filled in");
  }     
});

Remove all disabled attribute with button click

You'll want to use React's state management for this. I'm not sure if this is inside of a class component or a functional component but here's how you can achieve what you're looking for.

Also the React documentation covers State and Lifecycles I would recommend reading through these.

Class Component CodePen:

class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputsDisabled: true
    }
  }
  render() {
    return (
      ...yourcodehere
      <button onClick={() => this.setState({ inputsDisabled: false })}>Click Me</button>
      <input disabled={this.state.inputsDisabled} />
    )
  }
}

Functional Component:

const YourComponent = () => {
  const [inputsDisabled, setInputsDisabled] = React.useState(false)
    return (
      ...yourcodehere
      <button onClick={() => this.setState({ inputsDisabled: false })}>Click Me</button>
      <input disabled={inputsDisabled} />
    )
  }
}

Related Topics

How to Bind Bootstrap Popover on Dynamic Elements

Using Filesystem in Node.Js with Async/Await

What Is the JavaScript Mime Type for the Type Attribute of a Script Tag

Return Index of Greatest Value in an Array

Initializing Select with Angularjs and Ng-Repeat

How to Concatenate Regex Literals in JavaScript

Why How to Not Throw Inside a Promise.Catch Handler

Is JavaScript Object-Oriented

How to Know When I'Ve Stopped Scrolling

How Does Appcelerator Titanium Mobile Work

How to Invoke "Click" Event Programmatically in D3

How to Load All Files in a Directory Using Webpack Without Require Statements

Parse String to Date with Moment.Js

Splicing a JavaScript Array from Within the Callback Passed to Foreach

JavaScript Request Fullscreen Is Unreliable

Getting a Union of Two Arrays in JavaScript

What's the Purpose of Starting Semi Colon at Beginning of JavaScript

Is There a Way in JavaScript to Detect If the Unload Event Is Caused via a Refresh, the Back Button, or Closing the Browser


Leave a reply



Submit