How can I disable a checkbox once it has been checked? - javascript

I have a checkbox. First, I checked, then I want to change the check, and it's possible now.
However, I want to disable this. No one will be allowed to change that checkbox value once selected.
For this what can I do in my code:
view
<div class="control-group">
<label class="control-label">Language Known</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" value="1" name="lang_known"/> Hindi
</label>
<label class="checkbox">
<input type="checkbox" name="lang_known" value="2" /> French
</label>
</div>
</div>

You can achieve it by Jquery like this :
<input class="something" type="checkbox" value="1" />
In Jquery
//On click
$('.something').on('click', function() {
//disable if checked
$(this).prop("disabled", this.checked );
});
Reference Prop
JsFiddle

Related

How to fix margin between multiple radio when adding interactive elements between Bootstrap 3?

Whenever I try to add a so called additional-options element between the radios on my form, Bootstrap (BS3) causes different margins to be set on the radios. This is not unwanted, unless when hiding these additional options until the desired radio option has been selected (javascript interaction):
$(document).ready(function() {
$("#additional-options-1").css("display", "block");
$("input[type=radio][name=optionsRadios]").change(function() {
if (this.value == "option1") {
$("#additional-options-1").css("display", "block");
} else {
$("#additional-options-1").css("display", "none");
}
});
});
.additional-options {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p>
Try changing the following option and take a look at the margins of the available radios. What would be the supposed way to handle the margins? <br /><br />The radio element after the checkboxes requires a 'margin-top: -5px' according to the '.checkbox+.checkbox,
.radio+.radio' CSS rule (by Bootstrap 3) but does not seem to get it after the 'additional-options' element gets a 'display: none;' (by provided javascript).
</p>
<hr />
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Radio option one
</label>
</div>
<div class="additional-options" id="additional-options-1">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option one
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option two
</label>
</div>
</div>
<!--When additional-options is hidden:-->
<!--<div class="radio" style="margin-top: -5px;">-->
<!--Otherwise (no margin-top):-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Radio option two
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
Radio option three
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
Radio option four
</label>
</div>
<div class="additional-options" id="additional-options-2">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option one
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option two
</label>
</div>
</div>
<!--When additional-options is hidden:-->
<!--<div class="radio" style="margin-top: -5px;">-->
<!--Otherwise (no margin-top):-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option2">
radio option five
</label>
</div>
JSFiddle
As you can see in the example above, if the user selects any radio (but the first one), the margin betweem radios do not appear correct.
I tried setting in-line margin-top: -5px but this should also be removed again when concerning checkboxes are being shown. When the checkboxes are hidden, the <div class="radio"> right below the concerning <div class="additional-options" ... > should have a margin-top: -5px;. How am I to solve this "margin problem"?
customize bootstrap CSS like
.additional-options {
display: none;
}
.additional-options + .radio{
margin-top:-5px;
}
https://jsfiddle.net/lalji1051/h01wnqoz/2/
Different Margins are causing due to below Bootstrap Class.
.checkbox+.checkbox, .radio+.radio {
margin-top: -5px;
}
Override this class in your local CSS File as below and remove inline style "margin-top:-5px".
.checkbox+.checkbox, .radio+.radio {
margin-top: 10px;
}

JQuery "onchange" event on just one checkbox among multiple in a group based on label text

I have a group of checkboxes as -
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.
I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.
$("#check_1").change(function() {
alert('Checkbox One is clicked');
});
How do I do this as I have no access to modify the html ?
You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,
$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
alert('Checkbox One is clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Looks like your only criteria is the text of the label so you could target the input based on that label like :
$('label:contains("One")').prev('input:checkbox').change(function(){
console.log('One changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Hope this helps.

Default checked button

Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=tru‌​e;
Thank you Pandiyan Cool

Make multi checkbox getElementById with url link and change the link with value?

I have code like this... I want if I click checkbox for ex. hotel1, link +check+ will change hotel1, and if I click checkbox hotel2, link +check+ will change hotel2....
but the link not change...any idea?
<script type="text/javascript">
function link() {
var locationSearch = document.getElementById("locationSearchTerms").value;
var textSearch = document.getElementById("textSearchTerms").value;
var check = document.getElementsByName("checkbox1").value;
window.location.href = "http://www.server12.com/ser2/"+check+"/?textSearchTerms="+textSearch+"&locationSearchTerms="+locationSearch+"";
}
</script>
<form id="search" method="get" class="form-inline">
<div class="col-md-6">
Destination:
<input type="text" class="form-control" placeholder="Ex: Aston" name="textSearchTerms" id="textSearchTerms">
Location:
<input type="text" class="form-control" placeholder="Ex:Denpasar" name="locationSearchTerms" id="locationSearchTerms">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="link()"><span class=" glyphicon glyphicon-search" aria-hidden="true"> Search</button>
<br />
<br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel">Hotel
<label><br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel1">Hotel1
<label><br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel2">Hotel2
<label><br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel3">Hotel3
<label><br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel4">Hotel4
<label><br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel5">Hotel5
<label><br />
<label class="checkbox-inline"><input type="checkbox" name="checkbox1" id="checkbox1" value="Hotel5">Hotel6
<label><br />
</div>
</form>
You should not have same Id's to multiple elements in the DOM. It's a bad practise and is a pain if we are using Jquery. The problem is that when ever you are trying to get the value of the checbox by the code
var check = document.getElementsByName("checkbox1").value;
The result will always be the first element and its value. So make sure you are finding out the checbox which is checked and then retrieve its value.
var check = $('input[name="checkbox1"]:checked').val();
This should get you the right value. But if multiple checkboxes are checked then it will give the value of the first checked checkbox in the HTML hierarchy.
I would suggest using radio button if you are intending to use only one option selection for a search. I have made changes to your code with radio buttons and made some code changes.
1) Removed onclick event from the button. And registered the event in jquery document ready.
2) Changed checkboxes to radio button.
Here is the Working JsFiddle Let me know if you want further help.

Change the position of parsley-errors-list in parsleyjs

I am using parsleyjs.org to validate my forms.
The plugin creates a ui.parsley-errors-list when an input has a validation error.
The problem is that the .parsley-errors-list is being placed just after the form element's "input, textarea, radio etc.." breaking my layout as follows:
<fieldset>
<p>Checkboxs with a max</p>
<label class="checkbox parsley-error">
<input name="checkbox2" type="checkbox" required="" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
<ul class="parsley-errors-list filled" id="parsley-id-multiple-checkbox2">
<li class="parsley-required">This value is required.</li>
</ul>
<label class="checkbox">
<input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
<label class="checkbox">
<input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
</fieldset>
Instead, the .parsley-errors-list need to be positioned to be the last child/element within the container <fieldset>.
Is this achievable?
You can set the error container with (at least) two ways.
Change the container with DOM attributes
In cases where you only have one input (or group of inputs, like you do) and you want to change the container of the errors on those inputs, you can use data-parsley-errors-container="#element" (see the docs). Here is an example (jsfiddle demo)
<fieldset>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
</label>
<div id="checkbox-errors"></div>
</fieldset>
Note the attribute data-parsley-errors-container="#checkbox-errors" on the first checkbox and the element <div id="checkbox-errors"></div> at the end of the fieldset.
In this case you don't need to add the data-parsley-errors-container to all checkboxes because you're "grouping" them with data-parsley-multiple="checkbox2".
Set a custom configuration to be used by Parsley
In cases where you have a few or all inputs and you want to change the position of the default container. Lets say all your fields are placed inside a fieldset and you want to display the errors at the end of the fieldset.
This solution allows you to change the default container for each field (jsfiddle demo)
<fieldset>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
</label>
<div id="checkbox-errors"></div>
</fieldset>
<script>
$(document).ready(function() {
var parsleyConfig = {
errorsContainer: function(parsleyField) {
var fieldSet = parsleyField.$element.closest('fieldset');
if (fieldSet.length > 0) {
return fieldSet.find('#checkbox-errors');
}
return parsleyField;
}
};
$("form").parsley(parsleyConfig);
});
</script>
In this solution we've added the element <div id="checkbox-errors"></div> before the end of the fieldset and changed the errorsContainer option of Parsley. If our element is inside a fieldset the errors will be displayed inside the #checkbox-errors.
Based on this example, you are also able to set the same container for all fields. In this case your options would be something like this (jsfiddle demo):
var parsleyConfig = {
errorsContainer: function(parsleyField) {
return $('#errors');
}
};
For this kind of UI errors in the parsley js.
You can use the data-parsley-errors-container custom validator for placing the parsley error message as per your form needs.
<div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone1" value="1" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone1"> Yes </label>
</div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone0" value="0" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone0"> No </label>
</div>
</div>
<div class="margin-top10" id="cell-phone-validation-error-block"></div>
Try this:
$.listen('parsley:field:error', function(fieldInstance){
var fieldName = fieldInstance.$element.attr('name');
var field = $('input[name="'+fieldName+'"]');
var fieldWrapper = field.parents('fieldset');
if (fieldWrapper.find('.errors_container').length > 0) {
setTimeout(function(){
fieldWrapper.find('.errors_container').append(fieldWrapper.find('.parsley-errors-list'));
},100);
}
});
$('form').parsley();
}
Use class, because it works for many fields.

Categories