Hello, I'm writing because I have a question.
I want to deactivate the text box under the check box if I release the check box as shown below, but I am writing this because I am curious about how to do it. I want to control each check box even if it increases by turning the for door, but it doesn't work well. Jquery is a beginner, so he posts a question like this.
{% for other in others %}
<form>
<div class="form-group" >
<label for="name"><b>name</b></label>
<input type="text" value={{other}} class="form-control" id="message" name="message">
</div>
<div class="checkbox">
<label for="test">
<input type="checkbox" id="checkbox" name="checkbox" checked>test
<input type="text" class="form-control" id="text" name="text">
</label>
</div>
<button type="submit" button class="btn btn-primary">Create</button>
</form>
<script>
$("form").submit(function () {
var this_master = $(this);
this_master.find('input[id="checkbox"]').change( function () {
var checkbox_this = $(this);
if( checkbox_this.is(":checked") == true ) {
$('input[id="text"]').attr("disabled", false);
} } else {
checkbox_this.prop('checked',true);
$('input[id="text"]').attr("disabled", true);
}
})
</script>
There are many different approaches to actual solutions, but you must study addEventListener() and toggleAttribute().
In my demo, I tried to enforce a specific markup format. As long as you follow this markup rule, no matter how many copies you copy and paste, each works independently. Because no matter how many checkboxes come out, the actual event listener binding is for each checkboxes[i]. (And it goes back to pure vanilla js regardless of the jQuery version.)
For your information... Actually $('form').Submit() is not something else, but a method that puts addEventListener('submit') on the <form> tag, but it will be too late to do what you are saying at the time of this event.
This article was tested with jQuery 1.12.4.
$("form").submit(function() {
// Here
});
Once written, the script corresponding to here will only be executed when the submit event occurs in the form tag. Therefore, you must not have a script here that assigns an event handler. (Really, if you want to run the script after clicking the submit button, skip to Operator #2.)
Usually:
<form>
<div>
<input type="text" id="handleMe">
</div>
</form>
<script>
$('#handleMe').click(handlerFunction);
</script>
Let the script run immediately just below the desired tag, or do the following:
<script>
$(document).ready(function() {
$('#handleMe').click(handlerFunction);
});
</script>
<form>
<div>
<input type="text" id="handleMe">
</div>
</form>
Write the document to run on the event that the DOM generation ends. In this case, the location of the script is irrelevant.
In HTML, the tag attribute id is used as an identifier. That is, only one can exist within the same document.
Therefore, if you want to select more than one tag:
myForm.find('input[id="checkbox"]').change(handlerFunction);
You should not write a script that searches with id like this. Just because id has the same tag doesn't mean there's an error, and the script may seem to work right away, but It's a problem in the future.
Instead, fill it out like below:
variables = myForm.found('input'); // Select multiple by tag
variations = myForm.find('input[name="selectMe"]); // tag + multiple selections with duplicate attributes
Or
<input type="text" data-select-me>
<input type="text" data-select-me>
<input type="text" data-select-me>
<script>
variables = $('[data-select-me]'); // select multiple as user-defined attributes
</script>
So I usually write it like this:
<form>
<div>
<input type="checkbox" id="chk1" name="chk1" checked data-index="1">test
<input type="text" id="txt1" name="txt1" data-index="1">
</div>
<div>
<input type="checkbox" id="chk2" name="chk2" checked data-index="2">test
<input type="text" id="txt2" name="txt2" data-index="2">
</div>
<div>
<input type="checkbox" id="chk3" name="chk3" checked data-index="3">test
<input type="text" id="txt3" name="txt3" data-index="3">
</div>
</form>
<script>
$('input[type="checkbox"][data-index]').change(function() {
var $this = $(this);
var index = $this.attr('data-index'); // .data('index') replaceable
var $target = $('input[type="text"][data-index="' + index +'"]');
$target.prop('disabled', $this.is(':checked'));
}).change(); // Assign handler to change(function) and force event to change()
</script>
The <b> tag has been deprecated in HTML5, so please treat it as font-style CSS.
© 2024 OneMinuteCode. All rights reserved.