I am creating a payment option buttons. The problem is the pre-made option gives no place to add payment images and descriptions. So I have made a (li) list of options using basic html and content now i want to know if we can make li to select input when pressed
HTML Code
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
Current Input Code
<div class="radio-buttons-selection">
<label>
<input name="shipping" type="radio" class="radio" id="shipping_{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true" {/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)">
<div class="shipping_{$shipping.shipping_id} box"> <span>{$shipping.shipping_name}</span> </div>
</label>
I'm unfortunately not quite sure how you have implemented your Current input code with the rest of the code. However, using the first snippet of code, something like this (using jQuery) should work:
$("li").on("click", function() {
$("input[type=radio]").each(function() {
$(this).prop("checked", false);
});
$(this).find("input[type=radio]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
<input type="radio"/>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
<input type="radio"/>
</div>
</li>
</ul></div>
Basically, if a list-item is clicked, find the input[type=radio] in that list item and check it (and before that, make sure all others are unchecked so we keep it 'valid').
If you can merge your HTML code with your Current input code I might be able to provide a better example, but nonetheless you might see what's going on and what you could do?
$(".shipping-method li").on("click", function() {
$(".shipping-method input[type=radio]").each(function() {
$(this).prop("checked", false);
$(this).children(".shipping-method .item").removeClass("on");
});
$(this).find("input[type=radio]").prop("checked", true);
$(this).find(".item").addClass("on");
});
[:I assume the 'selectShipping' method will try to extract above
values(id,value,insure,supportCod) from 'this']
'Right Click' on browser & find out the following in run time the respective values for input element '*' that you are not able to customize:
1.)$shipping.shipping_id=?? , value=??,supportCod=??,insure=?? Of first option
2.)$shipping.shipping_id=?? , value=??,supportCod=??, insure=?? Of second option
elements into elements containin as the selectShipping method expects it to be
-->
<div class="shipping-method">
<ul class="">
<li>
<div class="item"><a href="javascript:;" class="weixin_wap" id="shipping_{$shipping.shipping_id_Of_firstoption}" value="{??Of_firstoption}" insure="{$shipping.insureOf_firstoption}" onclick="selectShipping(this)>Wechat</a>
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on"><a href="javascript:;" class="alipaywap" id="shipping_{$shipping.shipping_id_Of_second_option}" value="{??Of_second_option}" insure="{$shipping.insureOf_second_option}" onclick="selectShipping(this)>AliPay</a>
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
Related
I need div.edit-button to toggle its sibling div.additionalFieldForm.
Note that there's more than one div.edit-button and div.additionalFieldForm on the page, but I would like to target the div.additionalFieldForm that is in the same "family" as the div.edit-button that was clicked.
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).closest("div").prev().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
I've tried other selectors but I couldn't specifically target just the div.additionalFieldForm sibling of the edit button being clicked.
EDIT: I realize that there must be an underlying problem because the selector works on jsFiddle (http://jsfiddle.net/wf7jjoq7/), but not on my site, without any console errors.
Try using siblings()
$(".edit-button").click(function () {
$(this).siblings(".additionalFieldForm").toggle();
});
Try this solution:
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).parent().find(".additionalFieldForm").first().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
li is the common parent. So,
$(".edit-button").click(function () {
$(this).closest("li").find(".additionalFieldForm").toggle();
});
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).
Tried below code
HTML:
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
</body>
jQuery
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
It does not seem to be working for me though.
It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that.
So basically what you need is
$(document).on("click", "div:not('.nav-container')",function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.
$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
<br />
<div>click here </div>
</body>
I have a list in my html code where onclick of parent checkbox, the immediate child checkboxes should be checked.
<ul class="test_ex">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>
</li>
</ul>
<ul class="test_ex_sample">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Birds</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>
</li>
</ul>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref"> Food </a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I tried many ways to check only the immediate children. But none of them worked.
These are few ways:
Tried using .siblings() [Found this solution on stackoverflow only]
function fnTest(check) {
if ($(check).is(':checked')) {
$(check).siblings('.example').find('.child').attr("checked", true);
} else {
$(check).siblings('.example').find('.child').attr("checked", false);
}
}
Fiddle demo 1
Here the first list works properly. Again when clicked on second list it checks the 3rd list children too.
Secondly tried this set of code
Tried using the class which is checked annd getting children from that class. This checks all parents that belong to that class.
Fiddle demo 2
function fnTest(check) {
if ($(check).is(':checked')) {
var classParent = "." + $(check).attr('class');
$(classParent).attr("checked", true);
}
}
It would be great if someone could point out my mistake.
From your first try of using siblings(). You can change to the following:
function fnTest(check){
if($(check).is(':checked')){
$(check).siblings('.example:first').find('.child').prop("checked",true);
}
else{
$(check).siblings('.example:first').find('.child').prop("checked",false);
}
}
By using this it checks only the first children. And also change your .attr to .prop
here is a demo : Fiddle
You can do this by using jQuery. First of all remove onchange="fnTest(this);" from parent checkbox. Bind change event for parent checkbox like below :
$(function(){
$('.parent').click(function(){
$(this).parent().find('.example:first .child').prop('checked',$(this).is(':checked'));
});
});
Demo
try
function fnTest(check) {
$(check).closest("ul").find(":checkbox").prop("checked",check.checked);
}
DEMO
If you want only direct children use like this
function fnTest(check) {
$(check).closest("li").find(".example:first").find(":checkbox").prop("checked", check.checked);
}
DEMO
NOTE : use latest version in jquery, and also id should be unique
// OK tested
$(document).ready(function(e) {
$('input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});});
I have a drop down list having country names with their flag images. Since we cannot create such a list using <select> <option> tags, I created it using <ul> <li>. Now I want to capture the value selected by user and use it for some other purpose. How can I do it?
This is how the list has been created:
<form id="formId" action="" method="post" class="loginForm">
<fieldset id="localeSelect">
<div>
<div id="localeIndicator">
<a href="#" title="Select a country">
<span class="united-kingdom"></span>UK – English
</a>
</div>
<ul class="no-bullets block-list" role="tablist">
<li><span class="austria"></span>Austria</li>
</ul>
</div>
</fieldset>
<fieldset>
<input type="hidden" name="locale" />
<input type="submit" value="Continue" />
</fieldset>
You can do something like this.Have a look at fiddle
Fiddle Link
It will give you an idea.
$("#submit").click(function() {
alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});
This might be a bit hacky solution but using data-* attribute to give each item a unique value (not always the best option, but certainly one of the most commonly used if you ask me).
<div id="my-div">
<ul>
<li data-src="info to get here">something</li>
</ul>
</div>
And with jQuery
$(document).ready(function() {
$("#my-div li").click(function() {
var data = $(this).attr("data-src");
});
});
You can style the li to be: cursor: pointer; to have a finger when you hover it.
selector li:hover { cursor: pointer; }
Here's a fiddle to show it