Hi I am trying to hide some input fields when a checkbox is clicked.
Currently the checkbox will change color when clicked so that i know which one is active. It is not hiding the field when clicked tho.
I've tried a few methods but none seem to work so any help would be great.
My JQuery code:
$(function () {
$("#approvedToggle").buttonset(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
});
My asp.net markup
<div class="price-slider">
<h4 class="great">Do you pay an annual renewal fee?</h4>
<div class="col-sm-12">
<div>
<fieldset id="approvedToggle" class="text-center">
<input type="radio" id="ApproveButton" checked="checked" name="radio" />
<label id="ApproveButtonLabel" for="ApproveButton">Yes</label>
<input type="radio" id="RejectButton" name="radio" />
<label id="RejectButtonLabel" for="RejectButton">No</label>
</fieldset>
</div>
<p class="text-center">Percentage amount</p>
<div id="slider2"></div>
<h2 class="text-center" style="color: red"><b>OR</b></h2>
<p class="text-center">Fixed Amount</p>
<input type="text" id="fixedAnnualy" placeholder="0" class="form-control" />
<br />
</div>
</div>
My CSS
#ApproveButtonLabel.ui-state-active {
background: blue;
}
#ApproveButtonLabel.ui-state-active span.ui-button-text {
color: White;
font: bold
}
#RejectButtonLabel.ui-state-active {
background: blue;
}
#RejectButtonLabel.ui-state-active span.ui-button-text {
color: White;
font: bold
}
try like this:
you need to change event action and need to change html:
<div id="slider2"></div>
your $("#slider2") is empty.
$(function () {
$("#approvedToggle input[type='radio']").click(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
});
demo
Try something like below and take a look at Fiddle
$("#approvedToggle").click(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
Your slider2 was empty so added a simple data .
Check if this is what you want
This worked for me. Bind the event separately from invoking the buttonset
$("#approvedToggle").buttonset();
$("#approvedToggle").change(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
Related
how can I add the class "disabled" to the second checkbox if the first one is selected and vice versa.
I don't know where I'm wrong, this is my code, in which I imagined two functions to include where I will turn off the secondary checkbox in each. (maybe it can in one function for sure, but I don't know), this is my example, if someone can correct me where I went wrong, thank you.
function disableNewmobileOption(ev) {
ev.preventDefault();
var inputElementLabel = $(ev.currentTarget);
var inputElement = inputElementLabel.siblings("input");
if (inputElement.is(':checked')) {
if (inputElement.attr("id") === "b_mobnr") {
$(".newmobile .circle-buttons").addClass("disabled");
} else {
$(".b_mobnr .circle-buttons").removeClass("disabled");
}
}
}
function disableBMobOption(ev) {
ev.preventDefault();
var inputElementLabel = $(ev.currentTarget);
var inputElement = inputElementLabel.siblings("input");
if (inputElement.attr("id") === "newmobile") {
$(".b_mobnr .circle-buttons").addClass("disabled");
} else {
$(".newmobile .circle-buttons").removeClass("disabled");
}
}
<div class="row">
<div class="col-sm-4 newmobile">
<h4>Optionen</h4>
<span class="circle-buttons">
<input type="checkbox" name="b_mobnr" id="b_mobnr" value="0">
<label for="b_mobnr" onclick="disableNewmobileOption(event)">Mobile Option</label>
<div class="check square-check"></div>
</span>
</div>
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" value="0">
<label for="newmobile" onclick="disableBMobOption(event)">Newmobile Option </label>
<div class="check square-check"></div>
</span>
</div>
</div>
You can use .not() to add disabled class to other span tag when your checkbox is checked.Other way would be passing this inside your function call then depending on if the checkbox is checked add class to other span.
Demo Code :
/*$(".circle-buttons input[type=checkbox]").on("change", function() {
$(".circle-buttons").removeClass("disabled") //remove from all
if ($(this).is(":checked")) {
$(".circle-buttons").not($(this).closest(".circle-buttons")).addClass("disabled") //other span tag
}
})*/
function disableNewmobileOption(el) {
var inputElement = $(el);
//remove class from all
$(".circle-buttons").removeClass("disabled");
//check if checkbox is checked
if (inputElement.is(':checked')) {
//add class to other
$(".b_mobnr .circle-buttons").addClass("disabled");
}
}
function disableBMobOption(el) {
var inputElement = $(el);
$(".circle-buttons").removeClass("disabled");
if (inputElement.is(':checked')) {
$(".newmobile .circle-buttons").addClass("disabled");
}
}
.disabled {
color: grey;
pointer-events: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 newmobile">
<h4>Optionen</h4>
<span class="circle-buttons">
<!--aded click event on checkbox-->
<input type="checkbox" name="b_mobnr" id="b_mobnr" onclick="disableNewmobileOption(this)" value="0">
<label for="b_mobnr" >Mobile Option</label>
<div class="check square-check"></div>
</span>
</div>
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" onclick="disableBMobOption(this)" value="0">
<label for="newmobile">Newmobile Option </label>
<div class="check square-check"></div>
</span>
</div>
</div>
I need to make a simple js. Nothing fancy - just show or hide an element only if the inputs have the same value. All before send the form.
<form>
<input type="number" name="some1" id="some1">
<input type="number" name="some2" id="some2">
<div id="showhide">The inputs are the same</div>
<input type="submit">
</form>
The result can be something like this.
if(#some1(value)==#some2(value)) {
#showhide.show()
} else {
#showhide.hide()
}
Your jquery should be like this:
if($('#some1').val() == $('#some2').val()) {
$('#showhide').show();
} else {
$('#showhide').hide();
}
Something like this?
$("#some1, #some2").on("keyup change", function(){
let firstEl = $("#some1"),
secondEl = $("#some2"),
conditionalEl = $("#showhide");
if (firstEl.val() == secondEl.val() ) {
conditionalEl.show();
} else {
conditionalEl.hide();
}
});
#showhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" name="some1" id="some1">
<input type="number" name="some2" id="some2">
<div id="showhide">The inputs are the same</div>
<input type="submit">
</form>
I have an HTML checkbox next to a paragraph. When the user check the box, I want to put a strike through the paragraph using css bootstrap.
To add the strike through, I should wrap the paragraph with <del></del> tag.
I am able to wrap the paragraph correctly with the <del></del> when the box is checked. However, I am unable to remove the <del></del> tag when the user uncheck the box.
My code seems to be failing to check if the element is a del.
I created a fiddler to show you what is happening https://jsfiddle.net/vo1npqdx/1335/
in the fiddler, you will see that the code if (display.is('del')) { .... } is failing so the code inside the if statement never gets fired.
I tried to print the html code to the console to make sure I am dealing with the correct element, and it is clearly showing the correct code.
How can I unwrap my paragraph from the del tag?
Here is my JS code
$(function(){
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
} else {
var firstDisplay = display.parent().children().first();
console.log(firstDisplay.html())
if (display.is('del')) { // this is failing
firstDisplay.unwrap();
}
}
});
});
Here is my HTML code
$(function(){
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
} else {
var firstDisplay = display.parent().children().first();
console.log(firstDisplay.html())
if (display.is('del')) { // this is failing
firstDisplay.unwrap();
}
}
});
});
body {
padding-top: 65px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column.
Also, add a 8pm to the bottom margin
*/
.dl-horizontal dt {
white-space: normal;
margin-bottom: 8px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea,
.input-width-input {
max-width: 380px;
}
.uploaded-file-name {
max-width: 310px;
}
.help-block-standard {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
/* Vertically align the table cells inside body-panel */
.panel-body .table > tr > td
{
vertical-align: middle;
}
.panel-body-with-table
{
padding: 0;
}
.mt-5 {
margin-top: 5px !important;
}
.mb-5 {
margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="http://laravel54.dev/assets/asset/6" accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="_token" value="UA428wC4vxZgb9OmNCGBIkosCN4KuS49VgFiUTET">
<input name="_method" type="hidden" value="PUT">
<div class="form-group ">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input class="form-control" name="name" type="text" id="name" value="Some new test" minlength="1" maxlength="255" required="true" placeholder="Enter name here...">
</div>
</div>
<div class="form-group ">
<label for="notes" class="col-md-2 control-label">Notes</label>
<div class="col-md-10">
<textarea class="form-control" name="notes" cols="50" rows="10" id="notes" maxlength="1000"></textarea>
</div>
</div>
<div class="form-group " style="margin-bottom: 5px;">
<label for="picture" class="col-md-2 control-label">Picture</label>
<div class="col-md-10">
<div class="input-group uploaded-file-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse <input type="file" name="picture" id="picture" class="hidden">
</span>
</label>
<input type="text" class="form-control uploaded-file-name" readonly>
</div>
<div class="input-group input-width-input">
<span class="input-group-addon">
<input type="checkbox" name="custom_delete_picture" class="custom_delete_file"> Delete
</span>
<span class="input-group-addon custom_delete_file_name">
<p>uploads/zCmPgC5yMor77DaM50nTTnSnxh4y75e7B06WUFFM.jpeg</p>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-primary" type="submit" value="Update">
</div>
</div>
</form>
Maybe something like this?
var del = display.children().first();
console.log(del)
if (del.is('del')) {
del.contents().unwrap();
}
The del is element should be the first child of display. I've used console.log(del) because using html() is effectively giving you the innerHTML, which isn't particular helpful.
In your original code, display is your p element and this line was just going 'up one, down one', ending up back at the p:
var firstDisplay = display.parent().children().first();
This is the solution to your answer.
$(function(){
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
} else {
$(".custom_delete_file_name:eq(0) p").html($(".custom_delete_file_name:eq(0) p del").html());
}
});
});
But keep in mind you don't have to wrap it with a tag to make it strike through. You can simply add a css class or a style property with
text-decoration: line-through;
and toggle it.
This is the best approach.
A different approach... Intead of unwrap, just overwrite the p again with the content inside of del...
$('.custom_delete_file:checkbox').click(function(e){
var self = $(this);
var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');
if (self.is(':checked')) {
display.wrapInner('<del></del>');
}
else {
display.html(display.find('del').text());
}
});
I hope it helps
I'm trying to do detection onLoad to see if a radio button is checked. If it is then I want to output some text into a div. Currently it isn't working onLoad and the functionality only works on click.
I'm using local storage to remember if a user has selected certain fields on refresh and this works fine - so whatever radio button was selected before a refresh shows after.
This is the code to change the text onLoad:
$(document).ready(function() {
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();
if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
}
See full code:
// Circuit Select
// Toggle Metre Question and fill out summary
$('input[name="options[numberCircuitsMetre]"]').click(function(){
if($(this).attr("value")=="As many as possible per metre"){
$(".toggleQuestion").hide();
$('#circuit').text('As many as possible per metre');
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
});
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();
if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
if (circuitNum == 'Custom number') {
if($('.circuitsNum').val() == ''){
$('.circuitsValidation').html("<span class='flash'>Please add the number of circuits you want per metre</span>");
$('.circuitsNum').addClass("errorBorder");
var errorMessage = 'true';
} else {
$('#circuit').text('#circuitsNum'.value || '');
}
$(".toggleQuestion").show();
}
$("#circuitsNum").on('change keydown paste input', function() {
$('#circuit').text(this.value || '');
}).change();
$('#no').click(function() {
var term = $('#circuitsNum').val();
$('#circuit').text(term || '');
});
.radio-toggle {
margin-bottom: 30px;
}
.toggleQuestion {
display: none;
padding-top: 20px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!-- No. of Circuit Designs -->
<fieldset>
<label>Do you want as many circuit designs per metre as possible?</label>
<div class="radio-toggle">
<div class="row collapse radio-shack">
<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="yes" class="substrate" value="As many as possible per metre" checked="checked" />
<div class="check-cover">
</div>
<div class="check"></div>
<label for="yes">
<div class="label-head"><strong>Yes</strong></div>
</label>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="no" class="substrate" value="Custom number"/>
<div class="check-cover">
</div>
<div class="check"></div>
<label for="no">
<div class="label-head"><strong>No</strong></div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="toggleQuestion">
<label>How many circuit designs per metre would you like?</label>
<input type="number" name="options[numberCircuits]" step="any" placeholder="Add the number of circuits per metre..." class="circuitsNum number" id="circuitsNum">
<p class="circuitsValidation"></p>
</div>
</fieldset>
<div class="summary-row">
<div class="summary-cell summary-head">
<strong>No. of circuits:</strong>
</div>
<div class="summary-cell">
<span id="circuit"></span>
</div>
</div>
try this https://jsfiddle.net/0zzdkb32/44/ I just add this code
$(document).ready(function() {
$('input[name="options[numberCircuitsMetre]"]').each(function() {
if ($(this).val() == localStorage.getItem('selected')) {
$(this).click();
if($(this).val()=="As many as possible per metre"){
$(".toggleQuestion").hide();
setTimeout(function(){
$('#circuit').text('As many as possible per metre');
}, 100);
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
}
});
})
and add
localStorage.setItem('selected', $(this).val());
in your click event
For some reason the check-boxes on this form are not clickable and are very, very, tiny using google chrome. When using firefox the checkboxes work great. I'm not exactly sure what to look for... It's really strange!!! Is there something wrong with the way I'm using <form>? When I use inspector even if I disable all css the checkboxes are still tiny. not sure what is going on. reset browser cache etc. really could use some help.
HTML: http://pastebin.com/Pt6YgGP7:
CSS: http://pastebin.com/WHap5Vmh
Screenshot:
<div class="categories">
<button class="tyl_category" id="category1">Category1</button>
</div>
<form name ="things-you-like-form" class="sub-categories" action="things-you-like">
<div class="control-group">
<div class="controls category" id="form-category1">
Select from Category 1
<input type="checkbox" name="tyl_picked1" value="c1s1">
<label for "category1-subcategory1">1.1</label>
<input type="checkbox" name="tyl_picked1" value="c12">
<label for "category1-subcategory2">1.2</label>
<input type="checkbox" name="tyl_picked1" value="c1s3">
<label for "category1-subcategory3">1.3</label>
<input type="checkbox" name="tyl_picked1" value="c1s4">
<label for "category1-subcategory4">1.1</label>
</div>
</div>
<!-- end for-each sub-categores -->
</form>
</div>
JS
<script>
$(document).ready(function() {
$('form').each(function() { this.reset() });
var progress = 0;
$categories = $('.categories');
$sub_categories = $('.sub-categories');
$(document).on('click','.tyl_category', function(e) {
$form = $('#form-'+this.id);
console.log(this.id);
$categories.hide('slide', { direction: 'left' }, 250, function() {
$sub_categories.show();
$form.show('slide', { direction: 'right' },250);
});
});
$(document).on('click','input[type="checkbox"]', function (e) {
var $this = $(this);
var $progress_bar = $('#tyl_progress_bar');
if ($this.is(':checked')) {
progress +=1;
} else {
progress -=1;
}
$progress_bar.text('Step '+progress+'/5');
$progress_bar.css({width: (progress*25)+"%"});
$form = $this.parent('div');
$form.hide('slide', { direction: 'left' }, 250, function() {
$sub_categories.show();
$categories.show('slide', { direction: 'right' },250);
});
});
});
</script>
I had this problem too and had to set the checkbox height and width:
.make-checkbox-reasonable-height {
height: 16px;
width: 16px;
}
<div class="col-sm-2">
<input asp-for="MyCheckBox" class="form-control input-control make-checkbox-reasonable-height" />
</div>