I want to implement a button that becomes valid once I check and input it in JavaScript.
I created a form with one check box and one text box.
I want to make it valid only when the check box is selected and a character is entered in the text box, and the button is disabled when one or both are selected or not entered.
I want to enable/disable the button in real time both when I click the check box and when I enter text.
If possible, I would like to use one form with conditional branching etc. to switch between valid and invalid.
Thank you.
Error messageNo error message.
However, when you move it, the behavior is strange, you can press the button even if only one is enabled, or the button is disabled even though you enter a check box.
checkbox: Check box
Number: Text box
linkBtn: Button
$(function () {
$(". linkBtn"). prop ("disabled", true);
$("[name = 'checkbox']"). on ('click', function () {
if ($("[name = 'checkbox']"). prop ('checked')) {
$(". linkBtn"). prop ("disabled", false);
$(". btn"). removeClass ("disabled");
} else {
$(". linkBtn"). prop ("disabled", true);
$(". btn"). addClass ("disabled");
}
});
$("[name = 'Number']"). on ('keydown keyup keypress change', function () {
if ($("[name = 'checkbox']"). val (). length>0) {
if ($("[name = 'checkbox']"). prop ('checked')) {
$(". linkBtn"). prop ("disabled", false);
$(". btn"). removeClass ("disabled");
} else {
$(". linkBtn"). prop ("disabled", true);
$(". btn"). addClass ("disabled");
}
}
else {
if ($("[name = 'checkbox']"). prop ('checked')) {
$(". linkBtn"). prop ("disabled", false);
$(". btn"). removeClass ("disabled");
} else {
$(". linkBtn"). prop ("disabled", true);
$(". btn"). addClass ("disabled");
}
}
});
});
<form: form action = "/ exercise/ex6 /" method = "post" modelAttribute = "entry">
<label>
<input type = "checkbox" name = "checkbox"><b>Welcome</b>
<p>Welcome</p>
</label>
<label for = "inputId">Number</label>
<form: input maxlength = "5" path = "Number" />
<button type = "submit" name = "reception">Next</button>
</form: form>
Supplemental information (FW/tool version etc.)
-
Answer # 1
-
Answer # 2
Related articles
- javascript - i want to implement google recaptcha in react
- i want to run javascript eventlistener on the html button element obtained from api (php)
- javascript - i want to implement a chat function using action cable
- button to change html css style doesn't work (javascript)
- i want to implement an accordion opening/closing function with javascript
- javascript - i want to implement the in-page jump function based on the information read by ajax
- javascript - please tell me how to count the number checked with the checkbox
- javascript - i want to assign the number of the pressed button to a variable
- javascript - how to implement client-side rendering using nextjs
- see more button implemented in javascript
- javascript - back to top scroll button fade-in/fade-out does not work
- javascript - i want to add a one-click copy button to prettify
- javascript - it doesn't move when i press the button
- javascript - implementation of a button to copy text to the clipboard
- javascript - i installed a close button, but for some reason it does not disappear
- javascript - radio button and checkbox values cannot be obtained accurately
- php - i want to implement a movement like a radio button with checkbox
- javascript - i want the button to return to top to stop at a certain position
- javascript - when the button is pressed, the data is added to the table and then updated for each data
- javascript - i want to implement js that the header comes out softly when scrolling
- javascript : Only one button is selectable
- javascript : CSS hover and document.querySelector
- javascript : how to open a second modal window from one modal window
- javascript : Handle clicking on a part of a parent element that has no child blocks
- javascript : Input: Calculate the percentage of a number from a number
- javascript : JQuery SVG click event not working
- javascript : jQuery Smooth scrolling of the anchor does not work when switching to another page
- javascript : Handler doesn't want to send json data
- javascript : Swiper slider with scroll bar and progress bar
- javascript : About graph drawing of high charts
https://StackOverflow.com/questions/142525?link=qa_related_pc
With reference to this, I was able to implement by adding an initial value to the process.
Thank you very much.