Ways to Disable Toggle Button Automatically

I would like the toggle button to automatically turn off, and whichever product I select should also be turned off. When clicking on it, the product should then be displayed.

HTML

<div class="heading" id="seamless" style="display: none;">
   <center>PayPal now accepted! Make a sale and we'll email you to claim your funds. Easy! Your email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e8ede4e0e7c9ecf1e8e4f9e5eca7eae6e4">[email protected]</a></center>
</div>

Toggle Button

<div id="normal-toggle-button">
   <input name="open" value="1" type="checkbox" onchange="checkshowhidereverse(this.status, '#seamless'); checkshowhidereverse(this.status, '#setup');" checked="checked" />
</div>

Javascript

$(document).ready(function () {
   //* toggle buttons
   toggle_buttons.init();
});

Javascript function

//* toggle buttons
toggle_buttons = {
    init: function () {
        $('#normal-toggle-button').toggleButtons();
    }
};
javascriptjquerycsshtmltwitter-bootstrap

Answer №1

I'm not entirely sure if I have grasped the concept correctly?

At first, the DIV is hidden, checkbox unchecked – if that's the case, how about this approach?

Check out this example on JSFiddle

<div class="heading" id="seamless" style="display: none;">
<center>We now accept PayPal! Make a sale and we'll email you to claim your funds. It's easy! Your email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="69080d040007290c11080419050c04b08040506">[email protected]</a></center>
</div>

<div id="normal-toggle-button">
<input id="checkBox" name="open" value="1" type="checkbox"/>
</div>

JS: 

$('#checkBox').click(function() {
 if( $(this).is(':checked')) {
     $("#seamless").show();
 } else {
     $("#seamless").hide();
 }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Counting JSON Models in SAP UI5

I am encountering a particular issue. Please forgive my imperfect English. My goal is to read a JSON file and count the number of persons listed within it. I want this result to be stored in a variable that is linked to the TileContainer. This way, whenev ...

javascriptjqueryjsoncountsapui5

Storing data in MongoDB/Mongoose using the save method

Seeking help with a document-saving issue in my collection. The function response is correct, but it's not saving in the database. Oddly enough, the save() method works in another controller (createRoom), but not in this one. Thank you for any assista ...

javascriptnode.jsmongodbmongoose

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

javascriptjqueryhtmlcss

Mapping object data within an array of objects - a comprehensive guide

When working on a React project, I encountered a situation where I needed to retrieve API data structured like this: data: [ "_id": "123abc", "pics": { "pic1": "URL of pic1" "pic2":"URL of pi ...

javascriptreactjs

Do static and relative elements without any additional properties always appear in the identical position when rendered?

While working with elements, I have come to understand that when an element has a position of relative, it serves as a fixed point for elements inside it with absolute positioning. Additionally, I have learned that with relative positioning, I have the abi ...

htmlpositioningcss

AngularJS will not compile elements containing ng-repeat

I developed a specialized directive that swaps out the content within an element with a loading icon until the value of a specific attribute is no longer undefined. Here is the code for the directive: .directive('ngLoading', function (Session, $ ...

javascriptangularjs

Fetch information post search action through Ajax on a single PHP page

Looking for some guidance on using AJAX and PHP together. I've set up a page that uses AJAX to load data, and it's displayed with pagination. However, I'm struggling to redirect the search results back to birds.php. birds.php <script ty ...

javascriptphphtmlajaxpagination

Enhancing the appearance of elements using AJAX data submission

My current task involves utilizing jQuery to extract all content from a div along with its child elements. Here is the content within the DIV: <div class="content"> <h1 style="color:red">Test Title</h1> <p style="color:blue"> ...

javascriptjqueryhtmlcssajax

What is the process of creating a download link for a server file in a web browser?

I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...

javascriptphpjqueryhtmlpdf

The reactivity of Vuex and Vue does not work as expected when a dictionary is used as a

What is the best approach to make a dictionary reactive as one of my store variables? Unlike an array, dictionaries are not reactive by default. Here's a minimal example I've created: Check out this example on CodeSandbox ...

javascriptvue.jsvuexvue-reactivity

What is the method to remove an authentication code from a JSON file using JavaScript?

Is there a way to delete something from a JSON file? Here is an example: The file I am working with is named test.json Before I delete the authentication code: { "auth": [ { "test": 944037 }, { "tester& ...

javascriptnode.jsjson

How to modify and remove a card element in semantic UI with react coding

I have recently created some cards and now I want to enhance the user experience by allowing them to edit the card data and delete the card altogether if they choose to do so. For the deletion functionality, here is an example of deleting a card using jQu ...

javascriptreactjsbootstrap-4semantic-ui

Enforce cropping with jCrop

Does anyone know a way to automatically crop an image only if it does not have the correct size? I am currently using the jQuery jCrop plugin and I want to enforce cropping on all images. However, if you click outside of the cropping area, the cropping sh ...

jqueryimagecropjcropimage-size

Setting up and using npm jshint with Grunt and Node.js

I have successfully installed node.js on Windows with the npm package. My project is located in the D drive at D:>projectD I am currently working on running jshint along with SASS, concat, etc. Everything seems to be working fine except for jshint ...

javascriptnode.jsgruntjsnpmjshint

Text in the Bootstrap Modal is justified to the right

Recently, I created a modal where all the text, including labels, is aligned to the right by default in a sign-up form. Does anyone have a solution for this alignment issue? <div class="modal fade" id="signUp"> ...

twitter-bootstrapmodal-dialogbootstrap-modalbootstrap-5

Seeking help with listview functionality in jQuery and passing data to another page upon clicking

I have retrieved a dynamic list of items from a web service, displayed as follows: https://i.sstatic.net/VfXih.png My objective is to assign the clicked list item as a variable and pass its information to another page. I am struggling with this process a ...

jqueryajaxlistviewmobile

Adjusting the width of a kendo UI themed text field using CSS

Isn't it fascinating how you can adjust the width of a text box like this? @Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox", style="width:400px" }) However, I am seeking a more elegant solution. I attempted to implement this in a fres ...

asp.netcssasp.net-mvckendo-ui

The browser fails to render an EJS-generated page when responding to a Fetch request

Today, I encountered a strange issue that has left me puzzled. In summary, I have been sending a PUT request from a user form to the backend. Since forms do not natively support PUT/DELETE requests, I had to use a script to handle this task for me. let for ...

javascriptnode.jsexpressbackend

What is the best way to emphasize a selected row in a table when clicked using both Bootstrap 4 and Angular 6?

My Bootstrap table is styled with table-hover and all functions as expected. The .table-hover class activates a hover effect on table rows within a <tbody>. Additionally, I have implemented the following method: listClick(event, newValue) { this ...

htmlangulartypescriptbootstrap-4angular6

Make sure to include **bold text** and line breaks when setting up Laravel Notification Emails

Laravel 5.6 I am facing a challenge in sending a Laravel Notification via email. I aim to emphasize certain text, add line breaks without creating a whole new paragraph. I have attempted various methods in the notification class including using the newlin ...

phphtmllaravelnotifications