I'm trying to take the values of checkboxes and put them into an input field after they are checked. By using JavaScript, I am able to display these values within a <span> tag. However, when I try to do this within an <input> tag, they do not appear.
HTML:
<table width="680" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td width="550" nowrap=""><br>
<div class="dropdown_container">
<ul id="select_colors">
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="1" oncheck="cat_id.value=1" />Value 1</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="2" oncheck="cat_id.value=2" />Value 2</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="3" oncheck="cat_id.value=3" />Value 3</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="4" oncheck="cat_id.value=4" />Value 4</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="5" oncheck="cat_id.value=5" />Value 5</label>
</li>
</ul>
</div>
</td>
</tr>
<!-- Display values from checkboxes within this input tag -->
<tr>
<td>
<div class="dropdown_box">
<input name="cat_id" type="text" id="cat_id" />
</div>
</td>
<td width="550" nowrap=""> </td>
</tr>
</tbody>
</table>
JavaScript:
$(function () {
$(".dropdown_container input").change(function () {
var checked = $(".dropdown_container input:checked");
var span = $(".dropdown_box input");
span.html(checked.map(function () {
return $(this).val().replace("_"," ");
}).get().join(", "));
});
});
Use .val() instead of .html() as you are setting value property of the element, not updating innerHTML of the element
$(function() {
$(".dropdown_container input").change(function() {
var checked = $(".dropdown_container input:checked");
var span = $(".dropdown_box input");
span.val(checked.map(function() {
return $(this).val();
}).get().join(", "));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table width="680" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td width="550" nowrap="">
<br>
<div class="dropdown_container">
<ul id="select_colors">
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="1" />Value 1</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="2" />Value 2</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="3" />Value 3</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="4" />Value 4</label>
</li>
<li>
<label>
<input name="categories" type="checkbox" id="categories" value="5" />Value 5</label>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="dropdown_box">
<input name="cat_id" type="text" id="cat_id" />
</div>
</td>
<td width="550" nowrap=""> </td>
</tr>
</tbody>
</table>
Related
Im trying use radio button with ng-repeat, but when the repetitions are constructed the form dont bind the right way, bugs all radio -_-, what am i doing wrong? Like when I click in radio button change all or no one. I'm using angular js 1 and materialize.
Aqui: parte da estrututa do objeto
$scope.paineis = [
{
id:0,
listaCotacoes:[
{id:0, situacao:0},
{id:1, situacao:4}
]
},
{
id:1,
listaCotacoes:[
{id:6, situacao:0},
{id:9, situacao:4}
]
}
];
<tbody>
<tr ng-repeat="cotacoes in painel.listaCotacoes | orderBy: 'situacao'">
<td><a data-target="verCotacao" class="btn-floating teal modal-trigger"><i class="material-icons">description</i></a></td>
<td ng-if="cotacoes.situacao == 0"><i class="material-icons light-blue-text text-accent-4">lock_open</i></td>
<td ng-if="cotacoes.situacao == 2"><i class="material-icons gray-text">block</i></td>
<td ng-if="cotacoes.situacao == 3"><i class="material-icons green-text">thumb_up</i></td>
<td ng-if="cotacoes.situacao == 4"><i class="material-icons red-text">thumb_down</i></td>
<td>21/02/2014</td>
<td>
<form action="">
<div class="row">
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="aberta" ng-checked="cotacoes.situacao == 0" value="0" ng-model="cotacoes.situacao"/>
<label for="aberta{{cotacoes.id}}">Abrir</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Finalizado" ng-checked="cotacoes.situacao == 2" value="2" ng-model="cotacoes.situacao"/>
<label for="Finalizado{{cotacoes.id}}">Finalizado</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Aprovar" ng-checked="cotacoes.situacao == 3" value="3" ng-model="cotacoes.situacao"/>
<label for="Aprovar{{cotacoes.id}}">Aprovar</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Reprovada" ng-checked="cotacoes.situacao == 4" value="4" ng-model="cotacoes.situacao"/>
<label for="Reprovada">Reprovar</label>
</p>
</div>
</div>
</form>
</td>
</tr>
</tbody>
If your radio buttons are a group i.e where you have to select one from a group. The name "name="{{cotacoes.id}}"" should match on all of them. So instead of having them name="{{cotacoes.id}}" change to name="radio-group" on all of them that should work
<li>
<input type="radio" name="radio" id="radio2" ng-model="selectedItem.style_id" value="2">
<label for="radio2"><img src="/angular/images/Theme-Light-2.png" alt="course_theme_2"></label>
</li>
<li>
<input type="radio" name="radio" id="radio3" ng-model="selectedItem.style_id" value="3">
<label for="radio3"><img src="/angular/images/Theme-Light-3.png" alt="course_theme_3"></label>
</li>
<li>
<input type="radio" name="radio" id="radio4" ng-model="selectedItem.style_id" value="4">
<label for="radio4"><img src="/angular/images/Theme-Light-4.png" alt="course_theme_4"></label>
</li>
<li>
<input type="radio" name="radio" id="radio5" ng-model="selectedItem.style_id" value="5">
<label for="radio5"><img src="/angular/images/Theme-Light-5.png" alt="course_theme_5"></label>
</li>
name="" attribute groups radio buttons
Here is a image sample I have.
Here is a plunker view of code below. https://plnkr.co/edit/ap4p6yGy5gQKc3XuP45f?p=preview
How can I use angular to show values if it is checked and submitted? I am using thymeleaf framework for the UI.
HTML code
<div>
<form>
<h3> Values to be displayed</h3>
<ul>
<li>
<input id="features1" name="features" type="checkbox"/>
<input name="_features" type="hidden" value="on"/>
<label for="features1">account</label>
</li>
<li>
<input id="features2" name="features" type="checkbox" value=""/>
<input name="_features" type="hidden" value="on"/>
<label for="features2">bootfile</label>
</li>
<li>
<input id="features3" name="features" type="checkbox" value=""/>
<input name="_features" type="hidden" value="on"/>
<label for="features3">cmts</label>
</li>
<li>
<input id="features19" name="features" type="checkbox" value=""/>
<input name="_features" type="hidden" value="on"/>
<label for="features19">info_transaction_time</label>
</li>
<li>
<input id="features20" name="features" type="checkbox" value=""/>
<input name="_features" type="hidden" value="on"/>
<label for="features20">node</label>
</li>
<li>
<input id="features21" name="features" type="checkbox" value=""/>
<input name="_features" type="hidden" value="on"/>
<label for="features21">state</label>
</li>
</ul>
<input type="submit" value="Submit"/> <input type="reset" value="Reset"/>
</form>
</div>
HTML code cont
<div>
<table th:each="info : ${info}" style="width:100%">
<tr>
<td>account</td>
<td th:text="${info.account}"></td>
</tr>
<tr>
<td>bootfile</td>
<td th:text="${info.bootfile}"></td>
</tr>
<tr>
<td>cmts</td>
<td th:text="${info.cmts}"></td>
</tr>
<tr>
<td>info_transaction_time</td>
<td th:text="${info.info_transaction_time}"></td>
</tr>
<tr>
<td>node</td>
<td th:text="${info.node}"></td>
</tr>
<tr>
<td>billing_state</td>
<td th:text="${info.state}"></td>
</tr>
</table>
</div>
As you can see my code to display my values are in different div tag, therefore I can't use the inline show/hide method that angular js provides.
Example:
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"/>
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div style="background-color: white; position: absolute; top: 100px;left: 150px;" class="col-md-6">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio"
ng-model="ModelData.AnimalLiabCov" value="Y"/>
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio"
ng-model="ModelData.AnimalLiabCov" value="N"/>
No
</label>
</div>
</div>
The code above works because it is within the same div tag. But mine is in seperate div tags. What can I do?
You can use ng-show="yourVariable" in more than one div or in your <tr> tag.
In your HTML:
<input id="features1" name="features" type="checkbox" ng-model="accountChecked" />
<input type="submit" value="Submit" ng-click="yourFunction()"/>
And:
<tr ng-show="yourVariable">
<td >account</td>
<td th:text="${info.account}"></td>
</tr>
In your controller:
$scope.yourFunction = function ()
{
if ($scope.accountChecked) {
$scope.yourVariable = true;
}
else {
$scope.yourVariable = false;
}
}
Here's a quick tinker with your plunker to produce the angular result ... but I'm not sure how it will work alongside Thymeleaf:
EDIT: Modified the code so that it contains a controller (which is a better way to handle models) and an example of how the controller can use JQuery to glean values from other fields in the form that is rendered from the server.
If you need to gather values from the server AFTER the page has loaded, then we'd be going in the $http request module. It would be a good idea for you to take the Angular tutorial at W3C: http://www.w3schools.com/angular/default.asp
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.account = $('input#_features1').val() == "on" ? true : false;
$scope.bootfile = $('input#_features2').val() == "on" ? true : false;
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<form>
<h3> Values to be displayed</h3>
<ul>
<li>
<input id="features1" type="checkbox" ng-model="account"/>
<input id="_features1" type="hidden" value="on"/>
<label for="features1">account</label>
</li>
<li>
<input id="features2" type="checkbox" ng-model="bootfile" />
<input id="_features2" type="hidden" value="off"/>
<label for="features2">bootfile</label>
</li>
</ul>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</div>
<div>
<table th:each="info : ${info}" style="width:100%">
<tr>
<td >account</td>
<td>{{!!account}}</td>
</tr>
<tr>
<td>bootfile</td>
<td>{{!!bootfile}}</td>
</tr>
</table>
</div>
</body>
</html>
I've read heaps of posts about this and I'm still having issues with passing the return variable from my function to a hidden input value. The function is checking all radio buttons on the page (12 of them) and finding the one which is selected. It is either passing NULL or the javascript to screen.php. I have tested the checked() function and it works (used alert() to show the value). I've read heaps of posts on passing values to hidden inputs and none of those solutions have worked for me.
If you need to see more code, I can post it on pastebin.
<script language="text/javascript">
function checked()
{
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return valueSelected;
}
</script>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>KSM</h1>
</div>
</div>
<div id="buttons">
<ul>
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="1" />
<input type="hidden" name="status" value="READY" />
<input type="hidden" name="pickupid" id="pickupid" value="" />
<input type="submit" class="submit" name="READY" onclick="document.getElementById('pickupid').value = checked();">
</form>
<div id="search">
<ul id="nav">
<li class="tab1">Ordered</li>
</ul>
</div>
<div id="content">
<div id="container">
<table>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="5" value="005" />
<label for="5"> <span>005</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="6" value="006" />
<label for="6"> <span>006</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="7" value="007" />
<label for="7"> <span>007</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="8" value="008" />
<label for="8"> <span>008</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="9" value="009" />
<label for="9"> <span>009</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="10" value="010" />
<label for="10"> <span>010</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="11" value="011" />
<label for="11"> <span>011</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="12" value="012" />
<label for="12"> <span>012</span> </label>
</td>
</tr>
</table>
</div>
</div>
</body>
What's going on with the current code you have is you're submitting the form before the JS has time to execute your function and put the data into the hidden input. I wouldn't really suggest doing it in the way you're doing now, but here's a quick fix.
In your HTML change the form to this
<form id="form_ready" method="post" action="../backend/screen.php" onsubmit="return checked()">
And in your JS change your checked function to:
function checked(){
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return (document.getElementById('pickupid').value = valueSelected);
}
Also, get rid of the onclick on that submit button.
I know this question had a lots of related resources. But, Still i need a perfect solution.
I have generated five number of radio buttons group dynamically. Each group holds upto five radio buttons. I have validated "none checked in" and "at least one checked in feature" as an individual group.
My question is, How do I validate whether "All the groups are checked"
for ref:
My code Below:
var names = [];
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
alert('none checked in ' + name);
}
else{
// At least one checked
var val = radio_buttons.val();
}
}
I need to redirect to other page when all the radio button groups are checked. Its a bit simple. But, look complex for me.
Please Help.
UPDATE
My generated HTML for first two groups.
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
</ul></div></div></div>
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
</ul></div></div></div>
note: Here group name alone gets changed.
Changed
<div id="ratingContainer">
to
<div class="ratingContainer"> .
Removed
onclick="checkThis(this);"
from html , added one event handler for all input elements
elems.find("input").on("change", checkThis);
Try
var allChecked = false;
var names = [];
var elems = $(".0");
function checkThis(e) {
var name = e.target.name;
if (names.length < elems.length) {
names.push(name);
};
allChecked = elems.get().every(function(el, i) {
return $(el).find(":checked").is("*")
});
alert(name + " checked");
if (allChecked) {
// do stuff
alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked);
};
};
elems.find("input").on("change", checkThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="0" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="0" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="0" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="0" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="0" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="1" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="1" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="1" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="1" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="1" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
Looks like you already know how to count up the checked elements. If you put that in the first loop, you can mark a variable false if any come up empty.
var names = [];
var allChecked = true;
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
if $(this).filter(':checked').length === 0 {
allChecked = false;
}
});
https://jsfiddle.net/eu6L1f80/2/
Javascript:
$('form').on('submit', function(e) {
e.preventDefault();
var checkboxes = {};
$(':checkbox').each(function() {
checkboxes[$(this).attr('name')] = true;
});
$.each(checkboxes, function(i, val) {
if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
});
if (!Object.keys(checkboxes).length) {
alert('success!');
} else {
alert('error!');
}
});
HTML:
<form>
<div>
Group:
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
</div>
<button type="submit">Submit</button>
<form>
Okay, so I have a bit of a problem. I have some code, the JS works (at least with the non-CSS modified version), but it fails with the CSS modified version. Wondering if anyone can lend me some help to figure out what went wrong with the implementation of the CSS...
What I want to have happen, is the any of the first 4 chekboxes, if checked, disable all others. But, if any of the other checkboxes (numbers 5 and up) are checked, none are disabled (unless of course someone checks one of the first four).
My JavaScript:
<script type="text/javascript">
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
var $this = $(this);
$inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs.not(this).prop('checked',false);
}
});
$inputs2.change(function(){
var $this = $(this);
$inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs2.not(this).prop('checked',false);
}
});
});
The first Div:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr>
</table>
</div>
My CSS, if needed:
<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>
The problem is: the following works, and the following was later modified with CSS and I can't figure out what went wrong.
What works:
<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
It gets even odder when I add the code that worked to the same div as the one that doesn't, since it the above non-CSS then works properly and will disable (where appropriate) all the checkboxes regardless of CSS, but when the CSS are checked, all are disabled:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr> <input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</table>
</div>
.index() returns the index relative to the sibling elements. In your working example the siblings of an <input> are the other inputs. In your non-working example the only sibling is the <label> element.
In your "odd" example all inputs are siblings again.
In order to make it work anyway you can use .index(element):
$inputs.index($this)
This returns the index of the input $this within the jquery input collection $inputs. Working fiddle.
I would change the ID's on your input fields, ID's can't start with a number
<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
may cause problems with your JS. I would try something like
<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />