The Bootstrap tab pane has anchor tag as the tab controls, Instead of tab button look I need radio buttons.
Tried to add the radio buttons content of tag
<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
<a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
<label>
<input type="radio" value="accept" name="action" />
Accept
</label>
</a>
<a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
<label>
<input type="radio" value="discuss" name ="action"/>
Discuss
</label>
</a>
</div>
When a user clicks on the radio button a jquery script will trigger the tabs clicks, this works fine
$("input:radio").click(function(event) {
$(event.target).parents('a').trigger('click');
event.stopPropagation();
});
the whole code Js fiddle link
Issue
When a user click on the Label, tabs are selecting respectively but the radio button still in previous selections
The ways I tried to solve.
1. Added CSS pointer-events: none; this will affect radio also.
2. Script to check a radio button. this action call other js events
What I need.
A user only able to click the radio button, not tabs label part
OR
When User clicks on Tabs label, check the radio appropriate.
Code Snippet
Thank in advance
Here is the code to check the radio appropriate.
$("input:radio").click(function() {
$("#result").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
<a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
<label>
<input type="radio" value="accept" name="action" />
Accept
</label>
</a>
<a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
<label>
<input type="radio" value="discuss" name ="action"/>
Discuss
</label>
</a>
</div>
<div id="result"></div>
Hope this helps !
Related
I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.
This is the HTML document that I am working with:
.hidden{
display: none;
}
<label for="pay">Payment Option</label>
<div class="row check">
<div class="col-sm-6">
<input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
<label for="gcash" class="pay">Gcash</label>
</div>
<div class="col-sm-6">
<input type="radio" id="walk" name="pay" value="unpaid"/>
<label for="walk" class="pay">Walk In</label>
</div>
</div>
<div class="buttons">
Back
Proceed payment
<input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
</div>
radio.addEventListener('change', function() {
console.log(this.value)
});
use this handler for getting data of radio
then, find your element and use
element.classList.toggle("hidden");
for toggle class name, which uses in your css
I would like to combine two filters when clicking two different sections of buttons. Right now, when I click one button it removes the selection of the previous one. I have tried several functions but I have not been able to come with the right logic.
I have written a schema of my current status.
HTML
<!-- Buttons -->
<p> Language: <button class="btn" data-category="en"> EN </button> <button class="btn" data-category="it"> IT </button> </p>
<p> Stuff: <button class="btn" data-category="a"> A </button> <button class="btn" data-category="b"> B </button> <button class="btn" data-category="c"> C </button> </p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
js / jQuery
$(".btn").click(function(e){
e.preventDefault();
var category = $(this).data("category")
$('.element').hide();
$('.element.'+category).fadeIn();
})
It's also in this fiddle.
Also, nice to haves:
I would like to know how to color the button once it is selected.
Add a reset button (which I guess would be easy adding "reset" in data-category.
Thanks for the advice and the suggestions in advance!
One method is to use radio buttons. They allow one selection per group.
One downside is that you can't uncheck a radio button unless its by selecting another one in the same group, so I've added a "reset" button to each group.
Upon selection, I'm building a selector string of classes based on the checked buttons.
$(".mycb input").on('change', function(e) {
// select all the checked buttons.
var $checked = $('.mycb :checked');
// build an array of all the checked values.
var checked_classes = $checked.map(function() {
return this.value;
}).toArray();
// add the baseline "element" class to the array.
checked_classes.unshift('.element');
// build the class selector string.
var classes=checked_classes.join('.');
// debug the class selector string.
// console.log(classes);
// hide all elements.
$('.element').hide();
// show the elements that match the class selector string.
$(classes).fadeIn();
});
$('.reset').on('click', function() {
var $container = $(this).closest('p');
$('input', $container).prop('checked', false).last().trigger('change');
});
btn-selected {
color: red;
}
.mycb input {
display: none;
}
.mycb span {
background-color: white;
border: 1px solid #CCC;
border-radius: .3em;
padding: 0 .3em;
cursor:pointer;
user-select: none;
}
.mycb input:checked+span {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button -->
<p>Language:
<label class="mycb">
<input type="radio" name="lang" value="en">
<span>EN</span>
</label>
<label class="mycb">
<input type="radio" name="lang" value="it">
<span>IT</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<p>Stuff:
<label class="mycb">
<input type="radio" name="stuff" value="a">
<span>A</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="b">
<span>B</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="c">
<span>C</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
I have forked your js fiddle to provide a solution using your CSS class
https://jsfiddle.net/sguex20k/
JavaScript
$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class
/* other code */
$(this).addClass('btn-selected'); // adding class to clicked button
And the problem in your CSS you were missing the . in your selector
.btn-selected { }
I have a Bootstrap drop down menu that allows a user to add a check box next to an item in the drop down list. However, the user is able to add multiple check boxes - the desired behavior is that a user should only be able to select one check box. If a user has selected one check box the other check box should be removed.
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.checkbox').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});
.dropdown-menu-form {
padding: 5px 10px 0;
max-height: 100px;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Toggle dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 1
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 3
</label>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I tried to implement something with the count of the number of klass of .checkbox however that did not work. I am just looking to have the behavior if the user clicks a check box the previous check box will be removed.
Checkboxes are created to allow multiple checks, think of it as you can have this, that, and that. You are looking for a radio button. Radio buttons are treated as a you get this or you get that.
Try This
<li>
<label class="radio-btn">
<input type="radio">
Radio 1
</label>
</li>
JS
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.radio-btn').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});
I got an image positioned in container and 3 radio buttons. I would like to add another images appear over the container main image when some of the radio buttons is chosen. Each of the buttons will have different positions of the images shown when they are active.
So far I got that:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" /> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" /> 3
</label>
</div>
</div>
</div>
<div class="col-md-8 col-fl">
<div id="img_box">
<img style="width: 100%;" src="img/other/rounded_corners.png" />
</div>
You could add the image sources as data attr. to the radio button.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
</label>
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>
The img box is empty but size and image are set by css:
#img_box{
width: 350px;
height: 150px;
background: url('http://placehold.it/350x150/ff0000')
}
Then add a event that append a img overlay on click (using source from radio buttons):
$(function(){
$('input[type=radio]').click(function(){
$this = $(this)
$img_box = $('#img_box')
$overlay = $('<img/>').attr('src',$this.data('img'))
$img_box.html('').append($overlay)
});
})
See this example: https://jsfiddle.net/fmytsjv7/1/
You can achieve that using jQuery, and binding event handler to your radio buttons.
Like this one:
$('input:radio[name="quality[25]"]').change(function(){ });
Then add the handler to alter the attributes/css properties of the target image container or the image element directly.
You can use jQuery .css() to alter css properties of your target element
Like:
$("#img_box").css({"height":"100px","width":"100px",background:"red"});
While, you can use jQuery .attr() to alter the attributes of your target element.
Like: (in this case its the img's "src" attribute)
$("#img_box > img").attr("src","path/to/whatever/image");
HERE'S A SAMPLE IN JSFIDDLE
I see that you included jQuery tag in your question, so I assume you are interested in jQuery based solution.
Sorry if this seems a simple question but I can't figure it out or find a solution anywhere. I am new to angularJS and have a webpage which has two radio buttons and a "Details" button.
Obviously the website is written in angularJS and also using twitter bootstrap.
The question is a "Has the details been checked?" with a "Yes" and "No" radio button.
Clicking the "Details" button opens a modal with a "Close" button on it and details in it.
What I'm after is for these radio buttons to be disabled until the "Details" button has been clicked or once the "Close" button has been clicked from the modal (which ever is the best solution).
The only code I can provide is my HTML. I need it to be done without using JQuery.
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
You have to look for the ngDisabled directive.
<input type="radio" ng-disabled="!enableRadioButton">
<button ng-click="enableRadioButton = true">Details</button>
Edit
Since you added a code example, something like this should do the trick:
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required ng-disabled="enableRadioButtons" />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required ng-disabled="enableRadioButtons" />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
Add $scope.enableRadioButtons = true; to the opendatachecksmodel() method.
You could set the flag true when you close the modal as well.