The table contains a few rows like that:
<tr>
<td>
<input type="checkbox" name="indicator[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
<td>
<input type="checkbox" name="graduations[]">
</td>
</tr>
I need to disable 'graduations' being checked if 'indicator' is not checked. And if checked, i need to check exactly two 'graduations' in that row.
My actual code only limits the number of checked 'graduations'.
$(function() {
$('input[name=graduations\\[\\]]').click(function() {
if($(this).parent().siblings().children("input[name=graduations\\[\\]]:checkbox:checked").length >= 2)
this.checked = false;
});
});
You can try this:
$("#area_covered").click(function(){
if($("#area_covered").is(':checked'))
$('.area_covered').prop('checked', true);
else
$('.area_covered').prop('checked', false);
});
give some id to the checkbox you're going to click, and give some class to both of the other checkboxes which you want to be get checked also.
then use the above jquery tag, which would work for you definitely.\
Thanks & Enjoy coding :)
Updated try this simple FIDDLE
$(function(){
$("input[name^=graduations]").on("change",function(e){
if((!$("input[name^=indicator]").is(":checked")) || +$("input[name^=graduations]:checked").length > 2 ){
$(this).prop('checked',false);
}
});
});
makes it simple
Hope it helps
Related
If I have a table with 2 columns, a textfield and a checkbox... Each column has a class, and multiple rows in it. I don't know how to work this out:
If the textfield's number larger than 10, that row's checkbox automatically change from unchecked to checked.
Any ideas?
ok .. you can get the value of the input .. and in every keystroke check if the entered number is greater than 10 then loop through all the checkboxes and check them like that
$(".textfield").on("input", function () {
if (+$(this).val() > 10) {
$(".checkboxes").prop("checked", true)
} else {
$(".checkboxes").prop("checked", false)
}
})
you can try this and tell me if something went wrong
note : I added (+) before the $(this).val() to make sure the value is converted from string to number
edit: if you want to make an input for every row so this will not work!
you can make a specific class for every row and put the same class as a data attr in every input .. and then you can directly access to the input specific row checkboxes like that
$(".textfields").on("input", function () {
if (+$(this).val() > 10) {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", true)
} else {
$(`.${$(this).attr("data-id")} > td >
checkboxes`).prop("checked", false)
}
})
I hope this works .. I know It's a little bit confusing .. by understanding the main idea you solve it with multible solutions
If you can't understand this let me know
$('.input').on('blur', function() {
if(parseInt($(this).val()) > 10){
$(this).parent().closest('tr').find('.checkbox').attr("checked","checked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
</table>
You need use blur of jQuery, it means when the user looses the focus from input/textfield then implement the functionality of checkbox to be checked, this is for single input and checkbox, if you want to achieve it for multiple row with column then see the above snippet.
$('#input_field').on('blur', function() {
if(parseInt($(this).val()) > 10){
$('#checkbox').attr("checked","checked");
}
});
I have the following form
<tr v-for="(check, key) in checklistitems ">
<td>
<input type="radio" v-model="items_form.yes[key]" :value="check.id" :name="radioname(check)" />
</td>
<td>
<input type="radio" v-model="items_form.no[key]" :value="check.id" :name="radioname(check)" />
</td>
<td>
<input v-model="items_form.comment[key]" type="text" />
</td>
<td>
<input v-model="items_form.date_expiry[key]" type="text" />
</td>
</tr>
And, I have a computed property which gives the name
data: () => ({
items_form: {
no: [],
yes: [],
comment: []
.....
}
})
The comment works perfectly but the radio buttons fail.
Such that when I check the yes radio for the first time it sets the value correctly, when I check no it still checks the value but doesn't clear the previous yes value.
What else do I need to add?
You are giving both your radio input different models, that is why it is not working.
In order to be able to 'toggle' or switch one or the other, they should have the same model and only the value should be different as seen in this demo
So, use this instead.:
<td>
<input type="radio" v-model="items_form.no[key]" value="yes"/>
</td>
<td>
<input type="radio" v-model="items_form.no[key]" value="no"/>
</td>
I have a table where there are two things :
Click event on the row level
and click while checking a check box inside that row.
And when , checkbox is checked I do not want the Click event on tr to be fired.
<tbody data-bind="foreach:CustomerList">
<tr onclick="removepage();" onmouseover="changeRowColor(this)" onmouseout="restoreRowColor(this)">
<td>
<input class="checkbox" data-bind="click:$parent.customerClick(event)" type="checkbox">
</td>
<td class="col-md-4">
<span class="name" data-bind="text:customerName" />
</td>
<td>
<span data-bind="text:siteName" />
</td>
</tr>
</tbody>
Now in customerClick() ; I tried to achieve the same.
customerClick: function (e) {
debugger;
e.stopPropagation();
},
But it did not work.
It says , e.stopPropagation(); is not a function also.
Please tell me how to do that .
Knockout comes with a binding for such an occasion - clickBubble:
<input class="checkbox" data-bind="click:$parent.customerClick(event), clickBubble: false" type="checkbox">
Setting it to false on your input will prevent the click event from reaching the handlers further up the tree.
Radio input not working with localStorage
I used localStorage for many examples and work with me good except starRating.
Here is example example
I tried many codes , but does not work
Please give me example. Sorry I'm newbie.
<table>
<thead>
<tr>
<th STYLE="width:200px">link</th>
<th STYLE="width:200px">rating</th>
<th STYLE="width:200px">Options</th>
</tr>
</thead>
<tr>
<td>
<A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site a</A>
</td>
<td>
<span class="starRating">
<input CLASS="inputrating" CHECKED id="rating_9_5" type="radio" name="rating_9" value="5">
<label for="rating_9_5">5</label>
<input CLASS="inputrating" id="rating_9_4" type="radio" name="rating_9" value="4">
<label for="rating_9_4">4</label>
<input CLASS="inputrating" id="rating_9_3" type="radio" name="rating_9" value="3">
<label for="rating_9_3">3</label>
<input CLASS="inputrating" id="rating_9_2" type="radio" name="rating_9" value="2">
<label for="rating_9_2">2</label>
<input CLASS="inputrating" id="rating_9_1" type="radio" name="rating_9" value="1">
<label for="rating_9_1">1</label></span>
</td>
<td>
add
</td>
</tr>
<tr>
<td>
<A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site b</A>
</td>
<td>
<span class="starRating">
5
4
3
2
1
add
$(".starRating").on("click", function(){
selected_rating = $('input', this).data("inputrating");
selected_id = $('input', this).data("rating-id");
console.log(selected_rating)
});
You need to change your event binding to the Radio Buttons, not the spans that contain them.
Next, you need to access the values of the radio buttons, rather than using the jQuery .data() method, which I'm not sure what you are doing with.
this.value
In the event handler is all you need for that.
Next, you need to actually store the values, which you didn't have any code for:
if(window.localStorage){
localStorage.setItem("Site A Rating", this.value);
} else {
console.log("localStorage not supported.");
}
Here is a working Fiddle: https://jsfiddle.net/6jfey3cj/4/
And a screen shot showing the different site's ratings in localStorage.
The key issue you are struggling with is how to decide which element is best to trigger your function on. You are currently triggering on .starRating which is a span. It is possible to use that as the trigger but makes much more sense to simply fire the function whenever someone chooses a value on .inputrating which is a class that is unique to all your star rating radio buttons.
Try this code out:
$(".inputrating").on("change", function(){
checked_rating = $(this).val();
checked_id = $(this).attr('id');
console.log(checked_rating);
console.log(checked_id);
});
If you notice I changed click to change. This will make it so that your code only fires once on rating select. That way if you end up running an ajax function to update a database it won't keep getting called over and over if the user decides to spam click the same radio button over and over.
Here is a working fiddle demonstrating the solution: JSFiddle
You can change your javascript function as below
$(".inputrating").on("click", function(){
selected_rating = $(this).val();
selected_id = this.id;
console.log(selected_rating);
console.log(selected_id);
});
updated fiddle -
https://jsfiddle.net/tfhg15xw/2/
I am trying to make textbox readonly or not depending on the value of a checkbox of personalLoan. If personalLoan checkbox is checked I want the text to be not readonly. If it is unchecked then I want the text box to be readonly. Here is one of the rows
<tr id="mytableRows">
<td class="even"><input type="checkbox" value="true" name="homeLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="autoLoan" ></td>
<td class="even"><input type="checkbox" value="true" name="personalLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="noLoan" ></td>
<td class="odd"><input type="text" name="peronalAmount" value="1" readonly></td>
</tr>
I so far has this code
$(document).ready(function(){
$('.test tr').click(function (event) {
$(this).find(':checkbox').each(function(p){
if($(this).attr('name') == 'personalLoan'){
if ($(this).is(':checked')) {
alert("checked");
}else{
alert("unchecked");
}
}
});
});
});
This tells me the current status of the checkbox but what I really need is to know onchange of the personalLoan checkbox so I can make the textbox readonly or not in that row (td)
thanks
For my own sanity, here is what I understand the solution to be.
$('input[type=checkbox]', '.test').on('change', function(e) {
if (this.name === 'personalLoan') {
$(this).parents('tr').find('input[type=text]').prop('readonly', !this.checked);
}
});
Assuming a table with class test, this allows input when personalLoan is checked, and toggles to readonly when unchecked.
Demo on jsFiddle. (I've highlighted the checkbox in red.)
If this isn't it, then I really have no idea what you're trying to do.
It seems to me that you really want radio buttons, not checkboxes, and that the amount field should be set to disabled rather than readonly if the user selects "no loan".
Anyhow, here's an approach you can take. I've put the code in–line for convenience, it can re-implemented in jQuery or whatever you want, it's just an example of how to do what you seem to be trying to do.
The timeout is used so that the one click event can be used for any element in the form, including the reset button.
<form onclick="
var form = this;
setTimeout(function() {
form.personalAmount.readOnly = form.loanType[3].checked;
},0);
">
<table>
<tr>
<td><input type="radio" value="homeLoan" name="loanType">Home</td>
<td><input type="radio" value="autoLoan" name="loanType">Auto</td>
<td><input type="radio" value="personalLoan" name="loanType">Personal</td>
<td><input type="radio" value="true" name="loanType">None</td>
<td><input type="text" name="personalAmount" readonly></td>
<tr>
<td colspan="4">
<input type="reset">
</table>
</form>