Develop Reference

jquery toggling checked attribute of checkbox not triggering change event

I want to perform some actions when the div inside which a checkbox is, is clicked. This is how I change the checked attribute of the checkbox:
$(".crinbox").click(function () {
var cbox = $('input[value="crin"]');
if (!cbox.checked) {
cbox.attr("checked", true);
} else if (cbox.checked) {
cbox.attr("checked", false);
}
});
And this is how I handle the change,
$('input[value="crin"]').on("change", function () {
if (!this.checked) {
$(".crin").hide();
$('input[name="crin"').attr("value", "");
} else if (this.checked) {
$(".crin").show();
}
});
However, I am not able to trigger the on change function for the checkbox, all this does is check the checkbox, also, I can not uncheck the checkbox once I check it with this function.
HBS :
.crin (div to hide and show):
<div class="crin selectt" style="{{#if check.crinChecked}}display:block{{else}}display:none{{/if}}">
<input type="text" name="crin" value="{{fields.crin.[0]}}">
<input type="text" name="crin" value="{{fields.crin.[1]}}">
{{#if check.crinChecked}}{{#if fields.crinPartError}}<p style="color:red" class="error">
{{fields.crinPartError}}
</p>
{{/if}}{{/if}}
</div>
checkbox and its div:
<div class="dabba crinbox">
<input type="checkbox" name="events" value="crin" {{#if check.crinChecked}}checked{{/if}}>
<p> Create-in </p>
</div>

You can add :
cbox.trigger("change");
So :
$(".crinbox").click(function () {
var cbox = $('input[value="crin"]');
if (!cbox.checked) {
cbox.attr("checked", true);
cbox.trigger("change");
} else if (cbox.checked) {
cbox.attr("checked", false);
cbox.trigger("change");
}
});

Something like this?:
there was couple of things wrong with your code logic. I can explain what if this is even wanted result. But I am still confused what are you trying to achieve.
$(".crinbox").click(function () {
var cbox = $('input[name="crin"]');
if (!cbox.is(':checked')) {
cbox.attr("checked", true);
} else if (cbox.is(':checked')) {
cbox.attr("checked", false);
}
});
$('input[name="crin"]').bind("DOMSubtreeModified", function() {
var cbox = $('input[name="crin"]');
if (!cbox.is(':checked')) {
$(".crin").hide();
$(cbox).attr("value", "");
console.clear();
console.log(cbox.val());
}
if (cbox.is(':checked')) {
$(".crin").show();
$(cbox).attr("value", "crin");
console.clear();
console.log(cbox.val());
}
console.log("changed");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="crinbox">test crinbox click<br>
<input type="checkbox" name="crin" value="crin"> <br>
<div class="crin">test crin<br>
</div>

How to implement “select all” check box

i have invoice page and customer select the invoice and pay. invoice page if invoices are multiple then customer need to select check box each then click on Generate Invoice for payment. i want if invoice are multiple customer should check All then its work customer dont have choice select single. he should select All the check boxes then its work.
i think on page javascript code is below:
<script language="JavaScript">
function checkAll(theForm, cName) {
for (i=0,n=theForm.elements.length;i<n;i++)
if (theForm.elements[i].className.indexOf(cName) !=-1)
if (theForm.elements[i].checked == true) {
theForm.elements[i].checked = false;
} else {
theForm.elements[i].checked = true;
}
}
</script>
on invoice page i have also option select All check box
code is below:
<input type="checkbox" name="kk" id="kk" onClick="checkAll(document.getElementById('form4'), 'chk1');" >
when invoice are more multiple from database check code is:
<input name="orderNo[]" <?php if ($SQLRow["priceStatus"]=="Received") { ?> disabled="disabled"<?php } ?> type="checkbox" id="orderNo[]" value="<?php echo $SQLRow["orderNo"];?>" class="chk1" />
i just want one help if all the check boxes are selected then its work.

Try this
$('#kk').on('click', function() {
if($(this).prop("checked")){
$('input:checkbox').each(function() {
$(this).attr("checked", "checked");
$(this).prop("checked", true);
});
}
else{
$('input:checkbox').each(function() {
$(this).removeAttr("checked", "checked");
$(this).prop("checked", false);
});
}
});
Jsfiddle is here

How do I get javascript to run more than once?

EDIT: here is a jsfiddle with all the code. https://jsfiddle.net/ypbd3fgf/2/
I'm using this simple code to add a class to a parent element in order to make the text on a selected radio button turn bold. However, it only works on page load. If you select different radio buttons, the newly selected buttons don't turn bold. I think it's because the code only runs on page load. How do I get it to update when a new radio button or checkout is selected? Thanks!
<script type="text/javascript">
$(function() {
$(".ez-selected").closest('.row').addClass("bold");
});
</script>
The is the HTML. The .ez-selected class is added to the .ez-radio div when a radio button is selected. And then removed when a different radio button is selected. When the .ez-selected class is added, the .bold class needs to be added to the .row div. When the .ez-selected class is removed the .bold class needs to be removed from the .row div.
<div class="row (bold)">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
EDIT: I added the JS code below that adds and removes the .ez-selected class. This new JS that I'm trying to make will simply be adding and removing the bold class when the .ez-selected class is added and removed by this other JS code below.
(function($) {
$.fn.ezMark = function(options) {
options = options || {};
var defaultOpt = {
checkboxCls: options.checkboxCls || 'ez-checkbox',
radioCls: options.radioCls || 'ez-radio',
checkedCls: options.checkedCls || 'ez-checked',
selectedCls: options.selectedCls || 'ez-selected',
hideCls: 'ez-hide'
};
return this.each(function() {
var $this = $(this);
var wrapTag = $this.attr('type') == 'checkbox' ?
'<div class="' + defaultOpt.checkboxCls + '">' :
'<div class="' + defaultOpt.radioCls + '">';
if ($this.attr('type') == 'checkbox') {
$this.addClass(defaultOpt.hideCls).wrap(wrapTag)
.change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass(
defaultOpt.checkedCls);
} else {
$(this).parent().removeClass(
defaultOpt.checkedCls);
}
});
if ($this.is(':checked')) {
$this.parent().addClass(defaultOpt.checkedCls);
}
} else if ($this.attr('type') == 'radio') {
$this.addClass(defaultOpt.hideCls).wrap(wrapTag)
.change(function() {
$('input[name="' + $(this).attr(
'name') + '"]').each(
function() {
if ($(this).is(
':checked')) {
$(this).parent().addClass(
defaultOpt.selectedCls
);
} else {
$(this).parent().removeClass(
defaultOpt.selectedCls
);
}
});
});
if ($this.is(':checked')) {
$this.parent().addClass(defaultOpt.selectedCls);
}
}
});
}
})(jQuery);

Edit:
The new code switches to the function(){...} format and looks for a click event on an input element then checks if its a radio button and that the parent is .row then it adds the bold and ez-selected classes to the radio button and removes them from other radios.
$("input").click(function() {
if($(this).attr('type') == 'radio' && $(this).parents('.row').length > 0){
$("input").closest('.row').removeClass('bold ez-selected');
$(this).addClass('bold ez-selected');
}
})

your code should look somewhat like this:
<script type="text/javascript">
$(function() {
$("input[type='radio']").click(function(e) {
var targ = e.target
$("div[class='row'][class='bold']).removeClass('bold');
$(targ).parents('div[class="row"]').addClass('bold');
})
$(".ez-selected").closest('.row').addClass("bold");
});
</script>

Kendo Listview, added checkboxes, added a select all, will check and uncheck all once, will not check all again.

I would like some help with this. I have a Kendo Listview:
<form id="frmChk">
#(Html.Kendo().ListView<thieme_ws3.Models.QaTestModel>(Model)
.Name("testList")
.TagName("fieldset")
.HtmlAttributes(new { #class = "panel panel-primary panel-body" })
.ClientTemplateId("template")
)
<br />
</form>
Where I have added checkboxes to the information brought in:
<script type="text/x-kendo-tmpl" id="template">
<div class="col-md-5">
#Html.CheckBox("cb_#:Id#", new { #class = ".item", id = "cb_#:Id#" }) #=Name#
</div>
</script>
I have added a select all checkbox:
<label id="checkAll" class="checkbox">
<input type="checkbox" id="all" name="all" /> Select all
</label>
And added this to fire it:
$('#all').on('click', function (e) {
//alert("I'm clicked!" + this.checked);
var testList = $("#testList").data("kendoListView");
var dataItems = testList.dataItems();
//do thought to wrap the loop in a do while, caused the browser to stop
{
for (i = 0; i <= dataItems.length - 1; i++) {
//alert(dataItems[i].id);
var cb = $("#cb_" + dataItems[i].Id);
if (this.checked) {
cb.attr("checked", "checked");
}
else {
(cb.removeAttr("checked"));
}
}
}
})
It will work once, checking all boxes and unchecking all boxes but when I check the select all again, it will not select the others. I am certain it is something small I am overlooking, please help.

Try this instead (assuming the checkboxes are descendants of #testlist):
$('#all').on('change', function (e) {
var isChecked = $(this).prop('checked');
$("#testList").find('input[type="checkbox"]').prop('checked', isChecked);
})

Using javascript in a view to enable textbox on radiobutton state for each items in a list

I have this view with 2 radiobuttons strongly-typed to a model, and I wish to enable / disable textbox fields depending on the state of those radiobuttons.
Here is the view and the script I've been working on right now:
#model IList<MyApp.Models.ObjInfo>
#{
ViewBag.Title = "SendItems";
}
<h2>Ebay Items</h2>
<script src="/Scripts/jquery-1.7.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function dostate1() {
$("#textfield1").attr("disabled", "disabled");
$("#textfield2").removeAttr("disabled");
$("#textfield3").removeAttr("disabled");
}
function dostate2() {
$("#textfield1").removeAttr("disabled");
$("#textfield2").attr("disabled", "disabled");
$("#textfield3").attr("disabled", "disabled");
}
$(document).ready(function ()
{
alert("The document is ready");
if ($("#state1").is(":checked")) {
dostate1();
} else {
dostate2();
}
$("#state1").click(function (){
alert("Auction radio button has been clicked");
dostate1();
});
$("#state2").click(function () {
alert("Buy It Now radio button has been clicked");
dostate2();
});
});
</script>
<p>
#using (Html.BeginForm("ManageItems", "Item Inventory"))
{
(...)
#for (int i = 0; i < Model.Count; i++)
{
<p>
<tr>
<td>#Html.DisplayFor(x => x[i].m_OtrObj.m_ObjName)</td>
<td>#Html.RadioButtonFor(x => x[i].m_State, "State 1", new {id = "state1", style ="width: 50px"})</td>
<td>#Html.RadioButtonFor(x => x[i].m_State, "State 2", new {id = "state2", style ="width: 50px"})</td>
<td>
#Html.TextBoxFor(x => x[i].m_Field1, new{id = "textField1", style = "width:200px"})
</td>
<td>
#Html.TextBoxFor(x => x[i].m_Field2, new {id = "textField2", style = "width:200px"})
</td>
<td>
#Html.TextBoxFor(x => x[i].m_Field3, new {id ="textField3", style = "width:200px" })
</td>
</tr>
</p>
}
</table>
<input type="submit" value="Do Something"/>
}
</p>
Right now I have 2 main problems:
Clicking on each radiobutton actually disable the fields I wish to have disabled, but do not activate the other fields;
The script actually runs only when a button is clicked, but should run at start to avoid field 1 being active since by default the "state 1" radio button is enabled.
I'm REALLY a newbie as to javascript, so can anyone help me out? Thanks!!
EDIT **
I've modified the script to show you the evolution so far, thanks to everyone who helped out, the script works, but only for the first item in the list. Taking into account that it's a list of object (see #model), how can I affect each items in the list individually?

Change your script to
$(document).ready(function ()
{
alert("The document is ready");
$("#state1").change(function (){ // use change event instead of click
alert("state1 radio button has been changed");
// use prop instead of attr and always use the disabled attribute
// (there is not enabled). Use true/false to alter its state
$("#textField1").prop("disabled", true);
$("#textField2").prop("disabled", false);
$("#textField3").prop("disabled", false);
}).trigger('change'); // trigger a change event since it is the default
$("#state2").change(function() { // use change event instead of click
alert("state2 radio button has been changed");
$("#textField1").prop("disabled", false);
$("#textField2").prop("disabled", true);
$("#textField3").prop("disabled", true);
});
});

Ok, so:
you need to enable the radio buttons by using jQuery's removeAttr function (http://api.jquery.com/removeAttr/):
alert("state1 radio button has been clicked");
$("#textField1").attr("disabled", "disabled");
$("#textField2").removeAttr("disabled");
$("#textField3").removeAttr("disabled");
this is because it's the presence of the "disabled" attribute that disables controls.
if you break your enable/disable code out into functions:
function doState1() {
$("#textField1").attr("disabled", "disabled");
$("#textField2").removeAttr("disabled");
$("#textField3").removeAttr("disabled");
}
function doState2() {
$("#textField1").removeAttr("disabled");
$("#textField2").attr("disabled", "disabled");
$("#textField3").attr("disabled", "disabled");
}
$(document).ready(function () {
doState1();
$("#state1").change(function (){
doState1();
});
$("#state2").change(function() {
doState2();
});
});
you can then call them when the doc is ready, and hook them into the click actions.
Edit
To repeat this for sets of buttons + fields, I would have your loop generate ids that are unique to each element, e.g.
<input type="radio" id="state_1_1">State 1_1
<input type="radio" id="state_2_1">State 2_1
<input type="text" id="textField_1_1">Text 1_1
<input type="text" id="textField_2_1">Text 2_1
<input type="text" id="textField_3_1">Text 3_1
<input type="radio" id="state_1_2">State 1_2
<input type="radio" id="state_2_2">State 2_2
<input type="text" id="textField_1_2">Text 1_2
<input type="text" id="textField_2_2">Text 2_2
<input type="text" id="textField_3_2">Text 3_2
and then change the code to use a "search start of id" selector and split the id to obtain the set and state/text field number:
function doState1(theid) {
var idarr = theid.split("_");
var state = idarr[1];
var idval = idarr[2];
$("#textField_1_" + idval).attr("disabled", "disabled");
$("#textField_2_" + idval).removeAttr("disabled");
$("#textField_3_" + idval).removeAttr("disabled");
}
function doState2(theid) {
var idarr = theid.split("_");
var state = idarr[1];
var idval = idarr[2];
$("#textField_1_" + idval).removeAttr("disabled");
$("#textField_2_" + idval).attr("disabled", "disabled");
$("#textField_3_" + idval).attr("disabled", "disabled");
}
$(document).ready(function () {
if ($("#state_1_1").is(":checked")) {
doState1("state_1_1");
} else {
doState2("state_2_1");
}
$('input[id^="state_1_"]').change(function () {
doState1(this.id);
});
$('input[id^="state_2_"]').change(function () {
doState2(this.id);
});
});
See http://jsfiddle.net/raad/4vHBv/17/

First , You have to understand the there is no such attribute by the name of 'enable'. For enable the html element , you have to remove the disabled attribute from fields.
If you want to change your field from disabled to enable state , then just do as i am writing:
$("#textField2").removeAttr("disabled");
$("#textField3").removeAttr("disabled");
Above code will enable the the Textbox with id "#textField2" and "#textField3"

Your first question is already answered above. As for the second one I would suggest moving the state checking to a function like this:
function checkState(){
if($('#state1').is(':checked')){
//do stuff...
}
}
And then run the function once on document ready and every time the state of the radio buttons is changed.