We Keep Coding

How to remove a div containing a checkbox with a specific id?

I have different checkboxes generated dynamically.
Each checkboxes are contained within a div.
I would like to do the following action with jquery:
If a checkbox has an id="aucune", then remove its container (the div containing the checkbox with the id="aucune") from the html page.
I tried the following code:
// wait for DOM to be ready
$(document).ready(function() {
var empty = $("input:checkbox[id=aucune]");
if (empty == true) {
$(this).parent().remove();
}
});
Here is a the very simplified html:
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Here is my codepen:
I am quite new to code, I apologize for my silly simple question.

You can directly select the id with jQuery and remove the parent.
$('#acune').parent().remove();
Or if you know the class of the parent element
$('#acune').parent('.wrapper-checkbox').remove();

You are wrongly referencing this. It should be this way:
Replace this with empty.
Replace the boolean check with count.
Note: You can also use $("#aucune") instead of the selector $("input:checkbox[id=aucune]").
// wait for DOM to be ready
$(document).ready(function() {
// Or here you can also use $("#aucune").
var empty = $("input:checkbox[id=aucune]");
// Check if it is found.
if (empty.length > 0) {
// Remove the parent.
empty.parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Boom! And the checkbox is gone! :)

You can directly use the aucune id selector in your JQuery and then get the closest div with class wrapper-checkbox to remove it:
$(document).ready(function() {
var empty = $("#aucune");
if (empty.length !== 0){
$(empty).closest('.wrapper-checkbox').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>

Try to do this..
$(document).ready(function() {
var checkbox = $("input:checkbox[id=aucune]");
if (checkbox.length > 0) {
checkbox.parent().remove();
}
});

Add disable class to span if checkbox is disabled using jQuery

I have this checkbox code
<div class="checkbox-group">
<label class="fc-contain-sm checkbox-status">
<input type="checkbox" class="formjs-checkbox-sm" checked disabled>
<div class="fc-status-sm"></div>
<span class="checkbox-lable-sm">Disabled checkbox</span>
</label>
<label class="fc-contain-sm checkbox-status">
<input type="checkbox" class="formjs-checkbox-sm">
<div class="fc-status-sm"></div>
<span class="checkbox-lable-sm">Normal checkbox</span>
</label>
</div>
And i want to add class disabled to checkbox-lable-sm class if the checkbox is disabled using jquery
css
.checkbox-group .disabled {
cursor: not-allowed;
}
I have tried this code but it is not working
$('.checkbox-group > input:disabled.formjs-checkbox-sm').each(function(){
$(this).find('.checkbox-lable-sm').addBack().addClass("disabled");
});

$('.checkbox-group input:disabled.formjs-checkbox-sm').each(function() {
$(this).parent().find('.checkbox-lable-sm').addClass("disabled");
});

Give it a try to this,
$(".checkbox-group input[type='checkbox']").each(function() {
if ($(this).is(':disabled')) {
$(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
}
});
I am sure this will work.
Here is working jsfiddle
Here is second way,
$(".checkbox-group input[type='checkbox']:disabled").each(function() {
$(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
});
Here is third way,
$(".checkbox-group input[type='checkbox']:disabled").each(function() {
$(this).closest("label").find(".checkbox-lable-sm").addClass("disabled");
});

jQuery function won't run when removed from context

This code has the behavior I want, but I want the behavior to also occur when the page initially loads:
(jsfiddle: https://jsfiddle.net/1px1t57s/ )
$(document).ready(function(){
$('#id_repeat_type').on('change', function() {
if (this.value == 'NR')
{
$("#repeat-options").hide();
}
else
{
$("#repeat-options").show();
}
});
});
My first thought was to use "change load" or "change ready" instead of just "change", but this didn't change the behavior (possibly because the function is already wrapped in $(document).ready?)
My next thought was to pull the function out and run it separately as well as on change, but when I removed the function, it broke the existing functionality: https://jsfiddle.net/1px1t57s/1/
What am I missing?

Invoke .change() to call change-handler initially
Note that toggle with Boolean could be used to show/hide elements
$(document).ready(function() {
function toggle_options() {
$("#repeat-options").toggle(this.value != 'NR');
};
$('#id_repeat_type').on('change', toggle_options).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="/tasks/19" method="post">
<input type="submit" value="Save" />
<br>
<label for="id_task_name">Task name:</label>
<input style="width: 100%" id="id_task_name" maxlength="400" name="task_name" type="text" value="sample task" />
<label for="id_repeat_type">Repeat type:</label>
<select id="id_repeat_type" name="repeat_type">
<option value="NR" selected="selected">No Repeat</option>
<option value="IA">Repeat After X Days</option>
<option value="IE">Repeat Every X Days</option>
</select>
<div id="repeat-options">
<label for="id_repeat_days">Days between instances:</label>
<input id="id_repeat_days" name="repeat_days" type="number" />
</div>
<br>
<input type="submit" value="Save" />
</form>

You need to trigger the change event of the select on document.ready as following
$(document).ready(function(){
$('#id_repeat_type').trigger('change');
$('#id_repeat_type').on('change', function() {
if (this.value == 'NR')
{
$("#repeat-options").hide();
}
else
{
$("#repeat-options").show();
}
});
});

Here is modified javascript, based on your fiddle:
$(document).ready(function(){
toggle_options();
function toggle_options() {
if ($('#id_repeat_type').val() == 'NR')
{
$("#repeat-options").hide();
}
else
{
$("#repeat-options").show();
}
};
$('#id_repeat_type').on('change', toggle_options);
});
This will create a function, and run it first. There was a typo in the if statement. Also, when you call the function in on('change',toggle_options), do not include the brackets (i.e. NOT toggle_options())

How to hide a div on unchecking the checkbox

I have a checkbox ,when the checkbox clicks it will display a div ,if unchecked the div has to hide,I have tried this code but it is not working properly,oncheck it is showing the div but it's not hiding
Code:
<div style="clear:both;" class="tab">
<input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" /> Schedule Campaign
<div id="datediv" class="red boxs" style="display: none">
<!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
<label>Select date & time to schedule</label></br>
<input type="text" id="scheduledatetime" name="scheduledatetime"/><label id="schedule_error" class="error"> </label>
<!--<input type="text" id="datepickerad"/>-->
</div>
</div>
And the JS code:
$('#schedulecheck').on('ifChecked', function(event){
// alert();
if($(this).attr("value")=="red"){
$(".red").show();
}
});
$('#schedulecheck').on('unChecked', function(event){
if($(this).attr("value")=="red"){
$(".red").hide();
}
});

$('#schedulecheck').click(function () {
$(".red").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="clear:both;" class="tab">
<input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" />Schedule Campaign
<div id="datediv" class="red boxs" style="display:none" >
<!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
<label>Select date & time to schedule</label>
</br>
<input type="text" id="scheduledatetime" name="scheduledatetime" />
<label id="schedule_error" class="error"></label>
<!--<input type="text" id="datepickerad"/>-->
</div>

You can rather use .change() function for listening change event. and use .toggle(flag) with flag being true/false based on checked value for making show/hide decision:
$('#schedulecheck').change(function(){
$(".red").toggle(this.checked);
});
Working Demo

Ty this code
$('#schedulecheck').on('click',function () {
if($(this).is(':checked'))
$(".red").show();
else
$(".red").hide();
});

Use this:
$("#schedulecheck").on("click", function () {
$(".red").toggle($(this).is(":checked"));
});
This is "the cross-browser-compatible way to determine if a checkbox is checked" as jQuery recomands it (see http://api.jquery.com/prop/#prop1 for more details).

JQuery: how to check if checkbox is checked and add attributes to field

I'm trying to check whether a check box is checked, and if it is checked, then I want to add the "required" attribute to an adjacent text field. I've tried it two different ways with no success. Here are the form elements and my two JQuery attempts.
neither of those will actually trigger the event. My browser either does nothing at all or triggers an "Empty string passed to getElementById()." event
Form elements:
<div class="col-sm-5">
<label id="checkboxNumber-label" class="toplabel" for="checkboxNumber">Checkbox</label>
<g:textField name="checkboxNumber" value="${...checkboxNumber}" class="form-control" required="" aria-labelledby="checkboxNumber-label"/>
<label class="checkbox-inline">
<g:checkBox name="checkboxYesNo" id="checkboxYesNo" value="${...checkboxYesNo}" onclick="chkboxYesChecked()"/>
</label>
</div>
<div class="col-sm-5">
<label id="someTextField-label" class="toplabel" for="someTextField">Some Text Field Here</label>
<g:textField name="someTextField" id="someTextField" value="${...someTextField}" class="form-control" aria-labelledby="someTextField-label"/>
</div>
JQuery:
function chkboxYesChecked(){
if($('#checkboxYesNo').prop('checked')){
$('#someTextField').prop('required',true);
$('#someTextField').append('<span class="required-indicator">*</span>');
}else{
$('#someTextField').removeAttr('required');
}
}
$(document).ready(function() {
$('#checkboxYesNo').click(function() {
if($(this).is(":checked"))
{
$('#someTextField').prop('required',true);
$('#someTextField').append('<span class="required-indicator">*</span>');
} else {
$('#someTextField').removeAttr('required');
}
});
});

With your markup this becomes more convoluted than it needs to be.
$(document).on("click", ".checkbox-inline :checkbox", function () {
var $nextTextbox = $(this).closest("div").next("div").find(":text").first();
if (this.checked) {
$nextTextbox.prop("required", true).after('<span class="required-indicator">*</span>');
} else {
$nextTextbox.prop("required", false).next('.required-indicator').remove();
}
});
Notes
This approach uses event delegation.
There are no IDs involved, because I suppose you need the same thing more than once on your page. Tying it to a specific element ID is counter-productive.
This approach relies on the specific document structure from your sample Grails template. If you want something more flexible and easier-to-read, change your HTML.
This applies to all checkboxes that have a text field in the immediately following <div>. Use CSS classes on your elements to filter it/make it apply to specific ones only.
If there is no immediately following <div> with a text box, the function does nothing.
$(this).is(":checked") is superfluous. You don't need jQuery to find out if the current DOM element is checked. this.checked is a lot simpler and has the same effect.
Don't use inline event handlers (onclick="..."). Ever.
See it in action:
$(document).on("click", ".checkbox-inline :checkbox", function () {
var $nextTextbox = $(this).closest("div").next("div").find(":text").first();
if (this.checked) {
$nextTextbox.prop("required", true).after('<span class="required-indicator">*</span>');
} else {
$nextTextbox.prop("required", false).next('.required-indicator').remove();
}
});
input[required] {
background-color: #FFD1D1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label id="checkboxNumber-label" class="toplabel" for="checkboxNumber">Checkbox</label>
<input type="text" name="checkboxNumber" value="${...checkboxNumber}" class="form-control" required="" aria-labelledby="checkboxNumber-label" />
<label class="checkbox-inline">
<input type="checkbox" name="checkboxYesNo" id="checkboxYesNo" value="${...checkboxYesNo}" />
</label>
</div>
<div class="col-sm-5">
<label id="someTextField-label" class="toplabel" for="someTextField">Some Text Field Here</label>
<input type="text" name="someTextField" id="someTextField" value="${...someTextField}" class="form-control" aria-labelledby="someTextField-label" />
</div>