Develop Reference

jquery clone not working if user select other from the drop down the current text field disabled false

Working on jquery clone with my current code everthing works fine.
first scenario if user select other from the drop down the text
field gets enabled
Second scenario if user click addmore button div gets clone
perfectly with id when user select other both Original and clone
textfield gets enabled actually it should be only the cloned should
get enabled not the enabled
Here is the current Jquery code
var i=1;
$(document).on("click", ".edu_add_button", function () {
var i=$('.cloned-row1').length;
$(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({
'id': function(_, id) { return id + i },
'name': function(_, name) { return name + i }
}).end().find('[id]').val('').attr({ 'id': function(_, id) { return id + i }
});
$(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
if(i < $('.cloned-row1').length){
$(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
}
i++;
return false;
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".cloned-row1").remove();
}
});
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
$('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(".school_Name").prop('disabled', false);
$(".school_Name").val('');
}else{
$(".school_Name").prop('disabled', true);
}
});
$(document).on('change', '.txt_degreName', function (){
var cur = $('.txt_degreName').index($(this));
$('.degree_Description').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$("#degree_Description").prop('disabled', false);
$("#degree_Description").val('');
}else{
$("#degree_Description").prop('disabled', true);
}
});
Here is the fiddle link
Kindly suggest me
thanks & regards
Mahadevan

DEMO
The issue comes be cause you are using class selector directly. You need apply value only to the text box which belongs in the same container. Use closest() to find the parent.
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
var container = $(this).closest('.container-fluid');
$('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(".school_Name", container).prop('disabled', false);
$(".school_Name", container).val('');
}else{
$(".school_Name", container).prop('disabled', true);
}
});

DEMO HERE
You need to refer proper element that has to be disabled and enabled.
Take the sibling of select's parent and find the input element to be disabled as below:
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
$(this).closest('.col-xs-6').next('.col-xs-6').find('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").prop('disabled', false);
$(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").val('');
}else{
$(this).closest('.col-xs-6').next('.col-xs-6').find(".school_Name").prop('disabled', true);
}
});

From what you did, you actually change every fields with class .school_Name, to achieve what you want you can add $(this).parents(".row").find(".class_name") so it only change the current div.
$(document).on('change', '.txt_schName', function (){
var cur = $('.txt_schName').index($(this));
$('.school_Name').eq(cur).val($(this).val())
if ($(this).val() == "other") {
$(this).parents(".row").find(".school_Name").prop('disabled', false);
$(this).parents(".row").find(".school_Name").val('');
}else{
$(this).parents(".row").find(".school_Name").prop('disabled', true);
}
});
DEMO HERE

You can do it this way with targeting specific item using parent() and next() selector and also i prefer to access specific field instead of index(such as eq) for input.
var schoolObj = $(this).parent().next().find(".school_Name");
schoolObj.val($(this).val());
if ($(this).val() == "other") {
schoolObj.prop('disabled', false);
schoolObj.val('');
} else {
schoolObj.prop('disabled', true);
}
Here is the Fiddle
You can have a look for jquery traversing:
parent: https://api.jquery.com/parent/
Next: https://api.jquery.com/next/
Find: https://api.jquery.com/find/
and for full traversing: https://api.jquery.com/category/traversing/

In jquery how to put values of check-boxes which are ticked into an array?

I have check-boxes of "Apartment","House" etc. I want to collect the values of these check-boxes into an array and send that array to controller using json. Since I'm new to jquery I don't know how to put those values into an array using jquery ?
<script type="text/javascript">
$(document).ready(function () {
var arr = $("#hiddenroomdetails").val().split(",");
$('input[type=checkbox]').each(function () {
if ($.inArray($(this).val(), arr) > -1) {
$(this).attr("checked", "checked");
}
});
});
</script>
$.getJSON('#Url.Action("testcata", "home")' + '?property=' + selectedvalue +"&chkd="+checkedValues
function (data) {
//code
})

Pretty common way to do it using jQuery is by using map method. For example:
var checkedValues = $('.check:checked').map(function() {
return this.value;
}).get();
Demo: http://jsfiddle.net/mgzvm2s2/

Lets say if you give these checkboxes a class called "selectbox" and do the following code:
var selected = [];
$('.selectbox').click(function(){
if( $.inArray($(this).val(), selected) > -1 ){
var index = selected.indexOf( $(this).val() );
selected.splice( index, 1 );
}
else {
selected.push( $(this).val() );
}
}
This will fire an event when the checkboxes are clicked. It then checks if the value already exists in the "selected"-array. if it exists, it removes it (checkbox is unchecked). If it doesnt exist (checkbox is checked), it ads it.
Then you can pass on the "selected" array to the json function

You can try this:
$('button').click(function() {
var Arr = [];
$('.check:checked').map(function() {
Arr.push(this.value);
});
alert(Arr);
alert(Arr[0]);
})
Check jsfiddle.net

Remove option with value = MRW if I checkbox if checked

I'm trying to remove a option with value equal to MRW if #natural_person_lives_in_ccs_0 is checked but if I unchecked the checkbox then the SELECT should be as it was by default meaning same options. This is what I did:
$(document).ready(function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
But it's not working since Option1 is added by default and I don't know how to write this. I think to use .toggle() but don't know if it's the right one. I leave a Plunker here for testing. Any help on this?
Steps:
Check Yes option value=MRW should be removed
Remove the check from Yes option value=MRW as by default (same position)

Try to use the .change() function to accomplish your task here,
$('#natural_person_lives_in_ccs_0').click(function () {
var elem = $(".shipping_from option[value='MRW']");
if (this.checked) {
elem.remove();
} else if (elem.length == 0) {
$(".shipping_from").prepend('<option value="MRW">Option1</option>');
}
});
DEMO
The best way would be,
$('#natural_person_lives_in_ccs_0').click(function () {
$(".shipping_from option[value='MRW']").toggle(!this.checked);
$(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);
});
DEMO

Write your script like bellow.
var showOptionsAcorrdingCheckbox = function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
}
$(document).ready(function(){
$(':checkbox').change(showOptionsAcorrdingCheckbox);
});

DEMO
code:
$(document).ready(function(){
$(document).on('change', '#natural_person_lives_in_ccs_0', function(){
if($(this).is(':checked'))
{
$(".shipping_from option[value='MRW']").remove();
}
else
{
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
});

show div when all input fields have content

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/

Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});

You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/

Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});

Hide and show particular form items on checked and unchecked selectbox?

I am using the below given code to hide and show particular form items, but this doesn't work kindly let me know what I am missing in my code?
HTML:
<input id="id_code_col" type="checkbox" name="code_col"></input>
SCRIPT:
$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if ($(this).val() == '1') {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
});
N.B: I can not add or remove anything from html. What ever I have to do is to do it with script. Kindly help!

do like this:
if(this.checked)
{
// checked
}
else
{
// unchecked
}
for your case:
$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if (this.checked) {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
});

selectBox.change(function () {
if ($(this).is(':checked')) {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});

You can use .is() along with :checked selector to check whether your checkbox is checked or not, so try to use:
if ($(this).is(':checked')) {
or pure javascript using:
if(this.checked)
instead of:
if ($(this).val() == '1') {

Change this
if ($(this).val() == '1') {
to this
if (this.checked) {
Because you don't have to check for the value to 1, as your checkbox doesn't have any value set to 1.
So you have to check for the state of that checkbox with checked method.

$(document).ready(function () {
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if (this.checked) {
alert("checked");
}
else {
alert("unchecked");
}
});
});

$(function(){
$('#id_code_col').change(function(){
if($(this.checked)){
alert('checked');
}else{
alert('unchecked');
}
});
});