I have 4 checkbox inputs and i want to disable each input if is checked!
And disable all inputs if user checked 2 checkboxes i achive this with v-model length >= 4
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="1" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="2" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="3" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" value="4" v-model="inputs" disabled="inputs.length >= 4">
text1
</label>
</div>
What can i do to disable the input checkbox user checked?
Thanks for your question posting.
I think the disabled property of input tags should be :disabled.
<input type="checkbox" value="1" v-model="inputs" :disabled="inputs.length >= 4" />
Hope for your best result.
Thank you.
Related
In my View I am using following radio buttons
<div class="row">
<div class="col-md-4">
<input name="type" asp-for="loremType" value="1" type="radio" /><label for="rdbLetters">Letters</label>
</div>
<div class="col-md-4">
<input name="type" asp-for="loremType" value="2" type="radio" /><label for="rdbWords">Words</label>
</div>
<div class="col-md-4">
<input name="type" asp-for="loremType" value="3" checked="checked" type="radio" /><label for="rdbParagraphs">Paragraphs</label>
</div>
</div>
loremType is the parameter from the Model Class. Even though the value set as 1,2,3 these values are not passed to the controller.
Am I doing something wrong?
HTML code with radio buttons
Whichever option is chosen here should be shown in the input box below
`<div class="Choosesize">
<details>
<summary class="SelectionHeader"><span class="circleborder">3</span><span>Select your size</span></summary>
<div class="SizeOptions">
<input class="SizeInput" type="radio" name="size" id="3XL" onclick="displaySize()">
<label class="SizeLabel" for="3XL" onclick="displaySize()"> Triple XL </label>
<input class="SizeInput" type="radio" name="size" id="2XL" onclick="displaySize()">
<label class="SizeLabel" for="2XL" onclick="displaySize()"> Double XL </label>
<input class="SizeInput" type="radio" name="size" id="XL" onclick="displaySize()">
<label class="SizeLabel" for="XL" onclick="displaySize()"> Extra Large </label>
<input class="SizeInput" type="radio" name="size" id="L" onclick="displaySize()">
<label class="SizeLabel" for="L" onclick="displaySize()"> Large </label>
<input class="SizeInput" type="radio" name="size" id="M" onclick="displaySize()">
<label class="SizeLabel" for="M" onclick="displaySize()"> Medium </label>
<input class="SizeInput" type="radio" name="size" id="S" onclick="displaySize()">
<label class="SizeLabel" for="S" onclick="displaySize()"> Small </label>
<input class="SizeInput" type="radio" name="size" id="XS" onclick="displaySize()">
<label class="SizeLabel" for="XS" onclick="displaySize()"> Extra Small </label>
</div>
</details>
</div>`
HTML code for input box
<div class="CustomOption"> <input type="text" name="size" disabled value="Your size" id="YourSizeId"> </div>
Javascript I've tried
`function displaySize() {
var SizeChecked = document.getElementsByName('size');
for (i=0; i<SizeChecked.length; i++) {
if (SizeChecked[i].checked)
document.getElementById("YourSizeId").innerHTML = SizeChecked[i].value;
}
}`
The text "Your size" should change to the text of whichever radio button is checked. Currently, it is not recognising this and nothing happens.
I have two registration forms ona a page, but I only want to render one by clicking on proper button: 'Contract Form' or 'Company Form'. Should I do it with v-if? In the code below I just copied few lines of the form.
<template>
<div>
<button #click="contract">UMOWA</button>
<button #click="company">FIRMA</button>
<div v-if="contract">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<input id="lastname" v-model="lastName" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
<div v-if="company">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<button type="submit">Zarejestruj się</button>
<input id="lastname" v-model="lastName" type="text" required />
<label for="email">ADRES E-MAIL</label>
<input id="email" v-model="email" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
</div>
</template>
Yes but you will need to add true in the buttons onclick:
<button #click="contract = true">UMOWA</button>
<button #click="company = true">FIRMA</button>
#using (Html.BeginForm()) {
<div>
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p>
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>
}
Here i want to make all the label field and text field to appear on same line?How could i do that?
Change Parent Div and paragraph display style to inline
<div style="display:inline">
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p style="display:inline">
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>
I know this has been asked before but I the answers don't seem to work for me.
I am looking to decrease the size of my textbox and line it up beside a select and some text.
Here is my code.
<div class="controls">
<div class="btn-group">
<label class="btn btn-default">
<input type="checkbox" name="blah" value="true">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
<input class="form-control col-xs-1" placeholder="x" type="text" required="required">this should be beside the textbox. I also want the textbox to be small. One character small.
</label>
</div>
</div>
Also in bootply.
http://www.bootply.com/NePcbYQqfm
Thank you in advance!
Try this:
<div class="controls">
<div class="btn-group col-xs-4">
<label class="btn btn-default">
<input name="blah" value="true" type="checkbox">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
</label>
<input class="form-control input-sm" placeholder="x" required="required" type="text">this should be beside the textbox. I also want the textbox to be small. One character small.
</div>
</div>
It will work.