Question

这里我有两个表单字段

物业类型
卧室

我的要求是物业类型地块/地点/土地被检查意味着卧室我想取消选中并禁用假设地块/地块/土地意味着我想再做一次启用卧室领域如何做到这一点

$(function() {
  $("input[name=propertyType]").change(function() {
    var propertyType = $(this).val();
    if(propertyType == 7){
      $("input[name=unitType]").prop("disabled", true);
    }else{
      $("input[name=unitType]").prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Property Type :
<fieldset>
    <label><input type="checkbox" name="propertyType" value="4"> Apartment</label>
    <label><input type="checkbox" name="propertyType" value="7"> Plot/Site/Land</label>
</fieldset>

Bedroom:

<fieldset>
    <label><input value="1 Room/Hall" name="unitType" type="checkbox">1 Room/Hall</label>
    <label><input value="1 RK" name="unitType" type="checkbox">1 RK</label>
</fieldset>

Answer 1

由于您只对value = "7"的更改事件感兴趣，因此需要将选择器更改为

var $value7 = $("input[name='propertyType'][value='7']");
$value7.change(function() {
  $("input[name='unitType']").prop( "disabled",  !$(this ).prop( "checked" ) );
});

$("input[name='unitType']").prop( "disabled",  !$value7.prop( "checked" ) );

并从其他地方删除myFunction来电。

<强>演示

＆＃13;

var $value7 = $("input[name='propertyType'][value='7']");
$value7.change(function() {
  $("input[name='unitType']").prop( "disabled",  !$(this ).prop( "checked" ) );
});

$("input[name='unitType']").prop( "disabled",  !$value7.prop( "checked" ) );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Property Type :

<fieldset class="checkboxes">
  <label><input type="checkbox" name="propertyType" value="4"> Apartment</label>
  <label><input type="checkbox" name="propertyType" value="5"> Independent House/ Villa</label>
  <label><input type="checkbox" name="propertyType" value="6"> Individual House/ Standalone Building</label>
  <label><input type="checkbox" name="propertyType" value="7"> Plot/Site/Land</label>
</fieldset>


Bedroom:

<ul style="padding-left: 0px;">
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 Room/Hall" name="unitType" type="checkbox">1 Room/Hall</label></li>
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 RK" name="unitType" type="checkbox">1 RK</label></li>
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 BHK" name="unitType" type="checkbox">1 BHK</label></li>
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="2 BHK" name="unitType" type="checkbox">2 BHK</label></li>
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="3 BHK" name="unitType" type="checkbox">3 BHK</label></li>
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4 BHK" name="unitType" type="checkbox">4 BHK</label></li>
  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4+ BHK" name="unitType" type="checkbox">4+ BHK</label></li>
</ul>

＆＃13;

Answer 2

您需要使用change侦听器并定位您的Plot / Site / Land输入。这应该会给你一个很好的开始。

$(function() {

  $("input[value='7']").change(function() {
    $("input[name=unitType]").prop("checked", false);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <label><input type="checkbox" name="propertyType" value="5" onclick="myFunction()"> Independent House/ Villa</label>

  <label><input type="checkbox" name="propertyType" value="6" onclick="myFunction()"> Individual House/ Standalone Building</label>

  <label><input type="checkbox" name="propertyType" value="7" onclick="myFunction()"> Plot/Site/Land</label>
</fieldset>


Bedroom:

<ul style="padding-left: 0px;">

  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 Room/Hall" name="unitType" type="checkbox" onclick="myFunction()">1 Room/Hall</label></li>


  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 RK" name="unitType" type="checkbox" onclick="myFunction()">1 RK</label></li>


  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="1 BHK" name="unitType" type="checkbox" onclick="myFunction()">1 BHK</label></li>


  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="2 BHK" name="unitType" type="checkbox" onclick="myFunction()">2 BHK</label></li>


  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="3 BHK" name="unitType" type="checkbox" onclick="myFunction()">3 BHK</label></li>


  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4 BHK" name="unitType" type="checkbox" onclick="myFunction()">4 BHK</label></li>


  <li class="col-md-12" style="padding-left: 0px;"><label class="space"><input value="4+ BHK" name="unitType" type="checkbox" onclick="myFunction()">4+ BHK</label></li>


</ul>

Answer 3

使用单选按钮代替

这就是设计用于放射性按钮的设备。如果给出相同的名称，则只能选择一个：

<fieldset>
    <label><input type="radio" name="propertyType" value="4"> Apartment</label>
    <label><input type="radio" name="propertyType" value="7"> Plot/Site/Land</label>
</fieldset>

这不需要Javascript，用户熟悉radiobuttons所以预期的行为（你可以选择一个，一个复选框建议多个）。

Answer 4

package io.sphere.sdk.deletemeplese;

import io.sphere.sdk.producttypes.ProductType;
import io.sphere.sdk.producttypes.queries.ProductTypeQuery;
import io.sphere.sdk.queries.PagedQueryResult;
import io.sphere.sdk.test.IntegrationTest;
import org.junit.Test;

import java.util.ArrayList;
import java.util.List;
import java.util.function.Function;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

import static org.assertj.core.api.Assertions.assertThat;

public class SomeIntegrationTest extends IntegrationTest {


    @Test
    public void test(){

        final int PAGE_SIZE = 500;
        final long totalProductTypes = client().executeBlocking(ProductTypeQuery.of().withLimit(0)).getTotal();

        List<ProductType> allProductTypes = IntStream.range(0,(int)(totalProductTypes/PAGE_SIZE) +1)
                .mapToObj(i->i)
                .map(i -> ProductTypeQuery.of().withLimit(500).withOffset(i*PAGE_SIZE))
                .map(client()::executeBlocking)
                .map(PagedQueryResult::getResults)
                .flatMap(List::stream)
                .collect(Collectors.toList());

        assertThat(allProductTypes).hasSize((int)totalProductTypes);

    }

}

$(function() {
  $("input[name=propertyType]").change(function() {
    var propertyType = $(this).val();
    if(propertyType == 7 && $(this). prop("checked")){
      $("input[name='propertyType'][value!='7']").prop("checked",false);
      $("input[name='unitType']").prop("checked",false);
      $("input[name=unitType]").prop("disabled", true);
    }else{
      $("input[name='propertyType'][value='7']").prop("checked",false);
      $("input[name=unitType]").prop("disabled", false);
    }
  });
});

如何在类型值相等时禁用字段

4 个答案:

使用单选按钮代替